title: Upload file to Parse (Javascript)
body: <p>In brief I am trying to store pdf documents into parse. Essentially how it works, a user select the uploaded file from google drive, and from the document selected I want to store into Parse.</p>
  
  <p>I have been able to produce a URL for the pdf document selected from drive, and would like to use that URL to store in Parse.</p>
  
  <p>Below is the code that allows a user to select a pdf document from google drive, and where a unique URL is produced for that item.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
      &lt;title&gt;eSnail Scan Upload Part 2&lt;/title&gt;
  
      &lt;script type="text/javascript"&gt;
  
        // The Browser API key obtained from the Google Developers Console.
        var developerKey = 'xxxxxxxxxx';
  
        // The Client ID obtained from the Google Developers Console.
        var clientId = 'xxxxxxxxxxxxx';
  
        // Scope to use to access user's photos.
        var scope = ['https://www.googleapis.com/auth/photos'];
  
        var pickerApiLoaded = false;
        var oauthToken;
  
        // Use the API Loader script to load google.picker and gapi.auth.
        function onApiLoad() {
          gapi.load('auth', {'callback': onAuthApiLoad});
          gapi.load('picker', {'callback': onPickerApiLoad});
        }
  
        function onAuthApiLoad() {
          window.gapi.auth.authorize(
              {
                'client_id': clientId,
                'scope': scope,
                'immediate': false
              },
              handleAuthResult);
        }
  
        function onPickerApiLoad() {
          pickerApiLoaded = true;
          createPicker();
        }
  
        function handleAuthResult(authResult) {
          if (authResult &amp;&amp; !authResult.error) {
            oauthToken = authResult.access_token;
            createPicker();
          }
        }
  
        // Create and render a Picker object for picking user Photos.
        function createPicker() {
          if (pickerApiLoaded &amp;&amp; oauthToken) {
            var picker = new google.picker.PickerBuilder().
                enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
                addView(google.picker.ViewId.PDFS).
                setOAuthToken(oauthToken).
                setDeveloperKey(developerKey).
                setCallback(pickerCallback).
                build();
            picker.setVisible(true);
          }
        }
  
        // A simple callback implementation.
        function pickerCallback(data) {
          var url = 'nothing';
          if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
            var doc = data[google.picker.Response.DOCUMENTS][0];
            url = doc[google.picker.Document.URL];
          }
          var message = 'The following(s) were stored in Parse: ' + url;
          document.getElementById('result').innerHTML = message;
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="result"&gt;&lt;/div&gt;
  
      &lt;!-- The Google API Loader script. --&gt;
      &lt;script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Essentially I have the URL of a file, and would like to store that URL into Parse to be able to retrieve that file later.</p>
  
  <p>Note:</p>
  
  <p>Below is a code I found that allows a user to upload a file into Parse. The problem i do not want the file to come from the user computer (user upload file using file input), but from the URL provided by Google drive.</p>
  
  <pre><code>&lt;HTML&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form id="fileupload" name="fileupload" enctype="multipart/form-data" method="post"&gt;
    &lt;fieldset&gt;
      &lt;input type="file" name="fileselect" id="fileselect"&gt;&lt;/input&gt;
      &lt;input id="uploadbutton" type="button" value="Upload to Parse"/&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
    $(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", 'pWG7YizRnwxRjplGT9RSLoHtFItDtvmc2EK0YJAe');
            request.setRequestHeader("X-Parse-REST-API-Key", '2LsfIAg5Np9u09ScVIT5StEcO0LXMfpzndWOiwHX');
            request.setRequestHeader("Content-Type", file.type);
          },
          url: serverUrl,
          data: file,
          processData: false,
          contentType: false,
          success: function(data) {
            prompt("File available at: ", data.url);
          },
          error: function(data) {
            var obj = jQuery.parseJSON(data);
            prompt(obj.error);
          }
        });
      });
  
  
    });
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;/body&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>Any help or suggestion would be greatly appreciated. Thanks in advance.</p>