download file in react

Viewed 4.2k times

i have an Restful API i created using Laravel, this API like this:

http://127.0.0.1:8000/api/file/pdf/{id}

and this is my code for download:

public function pdfDownload($id){
       $pdf = Cv::findOrfail($id);
       return Storage::download('public/pdf/'.$pdf->pdf);
    }

it is worked in postman, and also in browser, it is directly download the file, but with react.js, it is not work, this my code in react:

pdfDownload = (id) => {
        fetch(' http://127.0.0.1:8000/api/file/pdf/' + id, {
            method: 'get',
            headers: {
                Accept: 'application/octet-stream',
                'Content-Type': 'application/octet-stream'
            }
        }).then((res) => res.json());
    };

and i call this function in button like this :

<Button color="primary" onClick={() => this.pdfDownload(data.id)}>
                                            Download
                                        </Button>

the id is corrected, i am ensure from this, my question is how can i download file when click this button.. Thans...

Answers

XHR calls can not trigger file download, the way browser handles it. You will have to mimic a file download using javascript code yourself, using something like below:

Reference

const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.pdf');
document.body.appendChild(link);
link.click();

Or use File Saver package, if you don't mind an extra dependency.

FileSaver Npm

Friday, November 11, 2022

alostale

You need to use the source link of your image.

For example, if laravel expose those static files under http://localhost/public/asset/img, then you need to write in your JSX:

<img src="http://localhost/public/asset/img/test.jpg" alt="test" />

Wednesday, December 21, 2022

shinichi_kai

Triggering browser download from front-end is not reliable.

What you should do is, create an endpoint that when called, will provide the correct response headers, thus triggering the browser download.

Front-end code can only do so much. The 'download' attribute for example, might just open the file in a new tab depending on the browser.

The response headers you need to look at are probably Content-Type and Content-Disposition. You should check this answer for more detailed explanation.

Sunday, December 25, 2022

palotasb

Here's a working example. Enter the text in the input field and click Download txt, this will download a txt with the contents you entered in the input.

This solution creates a new Blob object of the text MIME type and attaches it to the href of a temporary anchor (<a>) element which is then triggered programmatically.

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format.

class MyApp extends React.Component {
  downloadTxtFile = () => {
    const element = document.createElement("a");
    const file = new Blob([document.getElementById('myInput').value], {type: 'text/plain'});
    element.href = URL.createObjectURL(file);
    element.download = "myFile.txt";
    document.body.appendChild(element); // Required for this to work in FireFox
    element.click();
  }
  
  render() {
    return (
      <div>
        <input id="myInput" />
        <button onClick={this.downloadTxtFile}>Download txt</button>
      </div>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("myApp"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myApp"></div>

This answer was derived from thanhpk's post.

Wednesday, August 3, 2022

jwe

You just need to add below code to

// change your existing app route to this:
// we are basically just giving it an optional parameter of "anything"
Route::get('/{path?}', function($path = null){
        return View::make('app');
    })->where('path', '.*'); 
//regex to match anything (dots, slashes, letters, numbers, etc)

Your routes will be work fine any front-end JavaScript framework inside laravel.

Friday, October 7, 2022

gereleth

Only authorized users can answer the search term. Please sign in first, or register a free account.

Not the answer you're looking for? Browse other questions tagged :

reactjs

laravel

download

download file in react

Answers

reactjs,laravel,download