Download zip file from different server location in react js - reactjs

Folder structure on server:
-JAVA_PROJECT
---------DOWNLOAD_FOLDER
---------src
---------target
-REACT PROJECT
---------Public
---------src
---------node_modules
I have zip file in DOWNLOAD_FOLDER. Onclick of a button on react page i want to download the zip file.
My Code:
var urls = [
"/files/ProductList.zip",
];
var url = urls.pop();
var a = document.createElement("a");
a.setAttribute("href", url);
a.setAttribute("download", "");
a.setAttribute("target", "_blank");
a.click();
I am able to download only the files placed in PUBLIC folder. Is there any wway to traverse location to DOWNLOAD_Folder and download the zip file?
Or shall i fetch zip file content using axios and download file?
Please suggest.

Related

How to know the type of uploaded file in React app

I use the react app for uploading files to azure, but I want to know the type of file and then based on the type of file I want to upload to a specific container, e.g., if the user browses an image when user clicks on "upload" the file will upload to "container A", while if the file is video the file will upload to "container B". Therefore, I need to know what is the type of file.
Here you can add below code to get file name and extension.
var files = event.target.files
var filename = files[0].name
var extension = files[0].type
In the type you will find the extension for eg: if it is jpeg image then,
extension = image/jpeg
or if pdf then,
extension = application/pdf

Download the file as custom name while open a file using window.open() in reactjs

In react application, it display the file in new tab using window.open(blobURL). Following is code snippet:
const fileURL = window.URL.createObjectURL(file);
window.open(fileURL);
The fileURL variable generated url like "blob:http://localhost:3010/9d8996ad-8c96-4d42-ba9c-80a79d0fcd91" and user try to save the file, it stores as the Guid name("9d8996ad-8c96-4d42-ba9c-80a79d0fcd91"). How can we download as "test.pdf".

How do I download a file in reactjs from a URL

I have stored the file in my Firebase storage and I got the download URL as well. How do I initiate download in the browser? Right now it is only opening a new window with the file. Here is what I tried:
downloadFile=(file)=>{
var element=document.createElement('a');
element.style.display= "none";
element.setAttribute('href', file.fileUrl)
element.setAttribute('download', file.filename)
document.body.appendChild(element)
element.click()
document.body.removeChild(element)
}

How to set upload URL and file upload path in ng-file-upload (Lightweight Angular directive to upload files)

I am trying to implement jsfiddle example http://jsfiddle.net/danialfarid/s8kc7wg0/112/
of Drag and drop file upload using angular js and
it is working fine until I am using there URL path " 'http://angular-file-upload-cors-srv.appspot.com/upload"
I have used exactly the same code they have provided in the jsfiddle , I have understand that it will upload file in upload folder so i have created a folder name "upload" with 777 permission.
I am facing only issue with Controller url path section so i have given that code below.
$scope.upload = function (files) {
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.$error) {
Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {
username: $scope.content,
file: file
}
If you run this URL directly on the browser it will show you empty json data "{"size":0}"
I have searched for it in many website but not found any explanation about it.
My Query :
what is the use of this URl
how i can create this in my node js application.
How i can set file upload path
I have also checked there GitHub for details but no help
https://github.com/danialfarid/ng-file-upload
Any help will be appreciated

Uploading and storing file with Laravel

I am using Laravel illuminate/html and I am trying to upload an image file and store it in /public in the laravel installation folder. I have got the image from the request:
$img = Request::file('img');
How can I store it in the public folder?
Thanks
You could do this in your controller:
Request::file('img')->move(base_path('public/uploads'));
Or if you wish to specify a generic filename or change filename
$newfilename = str_random(32) .time();
$ newfilename = $newfilename. ".". Request::file('img')->guessClientExtension();
Request::file('img')->move(base_path('public/uploads'), $newfilename);`

Resources