5
\$\begingroup\$

I have created a system where user selects files from their Google Drive to be uploaded into Parse.

I have done so separately though, where I have one code that allows user to select an item from Google Drive, and one that allows user to upload a file from their computer into parse.

Google Drive (Using Google drive picker):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>eSnail Scan Upload Part 2</title>

    <script type="text/javascript">

      // The Browser API key obtained from the Google Developers Console.
      var developerKey = 'KEY';

      // The Client ID obtained from the Google Developers Console.
      var clientId = 'ID';

      // 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 && !authResult.error) {
          oauthToken = authResult.access_token;
          createPicker();
        }
      }

      // Create and render a Picker object for picking user Photos.
      function createPicker() {
        if (pickerApiLoaded && 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;




      }


    </script>
  </head>
  <body>
    <div id="result"></div>
    <div id="demo">

    <!-- The Google API Loader script. -->
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>

That allows a user to upload a file into Parse (PDF):

<HTML>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

  // ***************************************************
  // NOTE: Replace the following your own keys
  // ***************************************************

    Parse.initialize("ID", "ID");

  function saveJobApp(objParseFile)
  {
     var jobApplication = new Parse.Object("Scan");
     jobApplication.set("Name", "");
     jobApplication.set("DocumentName", objParseFile);
     jobApplication.save(null, 
     {
        success: function(gameScore) {
          // Execute any logic that should take place after the object is saved.
          var photo = gameScore.get("profileImg");
          $("#profileImg")[0].src = photo.url();
        },
        error: function(gameScore, error) {
          // Execute any logic that should take place if the save fails.
          // error is a Parse.Error with an error code and description.
          alert('Failed to create new object, with error code: ' + error.description);
        }
     });
  }

  $('#profilePhotoFileUpload').bind("change", function(e) {
         var fileUploadControl = $("#profilePhotoFileUpload")[0];
         var file = fileUploadControl.files[0];
         var name = file.name; //This does *NOT* need to be a unique name
         var parseFile = new Parse.File(name, file);

         parseFile.save().then
         (
           function() 
           {
               saveJobApp(parseFile);
           }, 
           function(error) 
           {
             alert("error");
           }
         );
  }); 

});
</script>

<body>
    <input type="file" id="profilePhotoFileUpload">
    <img id="profileImg"/>
</body>
</HTML>
\$\endgroup\$
4
\$\begingroup\$

You seem to separately download your file from Google, and then upload to Parse. So the "transfering" in the title is misleading.

Having said that, the code is well-structured but the naming is bad.


I find it semantically confusing to call your functions like onAuthApiLoad. This tells me nothing about what the function does. Now, when I'm reading the line calling this functions, I have no clue what it does. On the other hand, I already see where it is called, so this name is more redundant than helpful:

onload=onApiLoad

is what I am talking about. The same for:

setCallback(pickerCallback)

If instead function's name tell me what it does, I can understand the line without even checking the function's definition!


I suspect saveJobApp is not specific to Job Applications, so a more generic name could be more helpful.

Why gameScore???

fileUploadControl is prob better to name fileUploadElement


Parse.initialize("ID", "ID");

will look better as

Parse.initialize("ParseID", "ParseJsKey");
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.