The data browser is built for Chrome, Firefox, Safari, and IE9 and above. Please upgrade your browser, or download Google Chrome to get the best experience.
Back to Questions

Uploading files to Parse using JavaScript and the REST API

8 votes     1 answer     21.6k views     

8

I'm trying to upload image files to Parse.com via the REST API, but although I am getting a file_url back, the images themselves are showing as broken links.

For instance, I uploaded an image and got back the following url:

http://files.parse.com/e54abb9b-6acf-4380-9f7f-acac75586d40/bd22f884-9081-4f3d-a5a3-834544d1fd99-Hydrangeas.jpg

But when I go to it, there is just a broken image link. I'm not getting an error on upload, as far as I can see... what could I be doing wrong?

Here's my upload code (file is the file which was uploaded):

var serverUrl = 'https://api.parse.com/1/files/' + file.name;
$.ajax({
  type: "POST",
  beforeSend: function(request) {
    request.setRequestHeader("X-Parse-Application-Id", 'MY-APP-ID');
    request.setRequestHeader("X-Parse-REST-API-Key", 'MY-REST-API-ID');
    request.setRequestHeader("Content-Type", file.type);
  },
  url: serverUrl,
  data: file,
  processData: false,
  contentType: false,
  async:  false,
  success: function(data) {
    var fileitem = self.fileList[ii];
  },
  error: function(data) {
    var obj = jQuery.parseJSON(data);
    alert(obj.error);
  }
});

I'm very new to Parse, so it's probably something stupid!

Thanks!

1 Answer

9

Your code looks correct (although I'd suggest setting async to true, which is the default value). How are you selecting the file to be uploaded?

Tiggzi has an example of how you can use JavaScript to upload files to Parse, which I have adapted into the following. Perhaps you can give it a try and let me know if that works for you.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<form id="fileupload" name="fileupload" enctype="multipart/form-data" method="post">
  <fieldset>
    <input type="file" name="fileselect" id="fileselect"></input>
    <input id="uploadbutton" type="button" value="Upload to Parse"/>
  </fieldset>
</form>

<script type="text/javascript">
  $(function() {
    var file;

    // Set an event listener on the Choose File field.
    $('#fileselect').bind("change", function(e) {
      var files = e.target.files || e.dataTransfer.files;
      // Our file var now holds the selected file
      file = files[0];
    });

    // This function is called when the user clicks on Upload to Parse. It will create the REST API request to upload this image to Parse.
    $('#uploadbutton').click(function() {
      var serverUrl = 'https://api.parse.com/1/files/' + file.name;

      $.ajax({
        type: "POST",
        beforeSend: function(request) {
          request.setRequestHeader("X-Parse-Application-Id", 'MY-APP-ID');
          request.setRequestHeader("X-Parse-REST-API-Key", 'MY-REST-API-ID');
          request.setRequestHeader("Content-Type", file.type);
        },
        url: serverUrl,
        data: file,
        processData: false,
        contentType: false,
        success: function(data) {
          alert("File available at: " + data.url);
        },
        error: function(data) {
          var obj = jQuery.parseJSON(data);
          alert(obj.error);
        }
      });
    });


  });
</script>

Thank you - it seems to be working now. I had used that link originally, and I'm not really sure what I changed that made it work, but it seems fine, so thank you!

The reason I had async in was that I was originally trying to upload multiple files at once, and I thought async would make that work better. I went back to single files and forgot to take it out; I'd be interested to see any examples of multiple file uploads though, if anyone has any.

Thanks again.

- RocketReel Admin over 1 year ago

The Parse file upload endpoint only accepts a single file at a time. You can modify the above code to store the files array in var files (from the #fileselect bind function), and on Submit, iterate through files, calling the ajax function once for each separate file. Something missing from this example is associating the uploaded file with a Parse Object.

- Héctor Ramos over 1 year ago

Thanks, yes, that's what I'd been trying to do, but didn't quite get it to work. Will try it again when I come back to it! Thanks for your help!

- RocketReel Admin over 1 year ago

This method doesn't work in IE. The full filepath isn't available to the client.

- Solomon English over 1 year ago

The way for parse to support this would to emulate AWS and support hidden text fields on the form submit with the api keys and and id's.

- Solomon English over 1 year ago

I'm having the exact same problem but with node.js. It seems to work with .txt files but .jpg, *.pptx, and other files i need to upload break and even increase in size after the upload. The encoding is set to binary, any thoughts?

- Francisco Miranda over 1 year ago