How to upload image using ReactJS and save into local storage?

Question

Here is my code is like:

<input 
 type="file" 
 id="imageFile" 
 name='imageFile' 
 onChange={this.imageUpload} />

Now I want to store this image in local storage and display it at another side. So I want to store the image in local storage. My code is inside of image upload function.

My function is like:

imageUpload(e) {
    console.log(e.target.value);
}

My console print is like C:\fakepath\user-bg.jpg

https://stackoverflow.com/questions/19183180/how-to-save-an-image-to-localstorage-and-display-it-on-the-next-page — Prakash Sharma, Sep 04 '17 at 16:55
@Akib then the first link posted by Prakash sharma is something you definitely want to look at. — trk, Sep 05 '17 at 04:53

score 10 · Answer 1 · answered Oct 12 '17 at 21:37

First, you should be aware that:

LocalStorage can only store strings, so you can store files using a string representation only (like base64)
LocalStorage is not really made for storing files, because browsers only offer you limited capacity

If this is really what you want to achieve, here's the solution:

class Hello extends React.Component {

  imageUpload = (e) => {
      const file = e.target.files[0];
      getBase64(file).then(base64 => {
        localStorage["fileBase64"] = base64;
        console.debug("file stored",base64);
      });
  };

  render() {
    return <input 
     type="file" 
     id="imageFile" 
     name='imageFile' 
     onChange={this.imageUpload} />;
  }
}


const getBase64 = (file) => {
  return new Promise((resolve,reject) => {
     const reader = new FileReader();
     reader.onload = () => resolve(reader.result);
     reader.onerror = error => reject(error);
     reader.readAsDataURL(file);
  });
}

JsFiddle

Thanks for the code Sebastien, how do I get to convert this back to the image object data ? — Eazy, Apr 30 '20 at 22:33

Angel Cuenca · Answer 2 · 2017-10-12T20:36:48.873

One implementation to upload files, using Java in the backend and Google App Engine that uses blob Blobstore. First try to call a function in your button that sends the file name:

<input id="btn-chooseImage" className="btn-file"
       onChange={() => this.handleUploadSession()}

After that, call a get function in backend to save the file uploaded and save as a img state to render it.

Js:

handleUploadImg(redirectAction){
     var file = $('#btn-chooseImage')[0].files[0]
     var formData = new FormData();
     formData.append("uploaded_files", file);
     var request = new XMLHttpRequest();
     request.open("POST", redirectAction, true);
     request.send(formData);
     request.onload = function() {
         if (request.status === 200) {
             var response = JSON.parse(request.responseText);
             this.setState({
                 img: '/serve?blob-key=' +response.blobKey.toString()
             });
         }
     }.bind(this);
};

handleUploadSession(){
    var request = new XMLHttpRequest();
    request.open("GET", "/uploadSession");
    request.send();
    request.onload = function () {
        if(request.status === 200){
            var redirectAction = JSON.parse(request.responseText);
            this.handleUploadImg(redirectAction);
        }
    }.bind(this);
}

Java:

@RequestMapping(value = {"/uploadSession"}, method = RequestMethod.GET)
protected void GetUploadSession(HttpServletRequest request,
                                    HttpServletResponse response) throws IOException {

    BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
    String redirectAction = blobstoreService.createUploadUrl("/myView");

    String json = new Gson().toJson(redirectAction);
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
}

How to upload image using ReactJS and save into local storage?

2 Answers2

Linked