title: How to set parents folder name and get the uploaded image id for Google Drive Api javascript
body: <p>I have implemented this by following <a href="https://codingshiksha.com/how-to-upload-files-to-google-drive-in-javascript-using-google-drive-rest-api-v3" rel="nofollow noreferrer">this</a> tutorial and it's working perfectly. After successful authentication the image is uploading on my <code>Google Drive</code> perfectly. But now I want to know</p>
  <ol>
  <li>how can I add parent's folder name directory <code>(parent/folderOne/folderTwo)</code> for my uploaded image?</li>
  <li>And I also need the <code>fileID</code> for newly uploaded image.<br />
  In java script I can do that in</li>
  </ol>
  <pre><code>const fileMetadata = {
          'name': 'any_file_name',
          parents: ['1xxxXj_sdsdsdsd0Rw6qDf0jLukG6eEUl']
  };
  </code></pre>
  <p>But here I don't have any knowledge on <code>ajax</code>, so any help would be highly appreciated.<br />
  Thanks!<br />
  This is the code for uploading to <code>Google Drive</code>:</p>
  <pre><code>$(document).ready(function() {
      const urlParams = new URLSearchParams(window.location.search);
      const code = urlParams.get('code');
      const redirect_uri = &quot;http://localhost/googleDriveUpload/upload.html&quot; // replace with your redirect_uri;
      const client_secret = &quot;***********&quot;; // replace with your client secret
      const scope = &quot;https://www.googleapis.com/auth/drive&quot;;
      var access_token= &quot;&quot;;
      var client_id = &quot;********************&quot;// replace it with your client id;
  
      $.ajax({
          type: 'POST',
          url: &quot;https://www.googleapis.com/oauth2/v4/token&quot;,
          data: {code:code
              ,redirect_uri:redirect_uri,
              client_secret:client_secret,
          client_id:client_id,
          scope:scope,
          grant_type:&quot;authorization_code&quot;},
          dataType: &quot;json&quot;,
          success: function(resultData) {
             localStorage.setItem(&quot;accessToken&quot;,resultData.access_token);
             localStorage.setItem(&quot;refreshToken&quot;,resultData.refreshToken);
             localStorage.setItem(&quot;expires_in&quot;,resultData.expires_in);
             window.history.pushState({}, document.title, &quot;/GitLoginApp/&quot; + &quot;upload.html&quot;);
          }
    });
  
      function stripQueryStringAndHashFromPath(url) {
          return url.split(&quot;?&quot;)[0].split(&quot;#&quot;)[0];
      }
  
      var Upload = function (file) {
          this.file = file;
      };
  
      Upload.prototype.getType = function() {
          localStorage.setItem(&quot;type&quot;,this.file.type);
          return this.file.type;
      };
      Upload.prototype.getSize = function() {
          localStorage.setItem(&quot;size&quot;,this.file.size);
          return this.file.size;
      };
      Upload.prototype.getName = function() {
          return this.file.name;
      };
      Upload.prototype.doUpload = function () {
          var that = this;
          var formData = new FormData();
  
          // add assoc key values, this will be posts values
          formData.append(&quot;file&quot;, this.file, this.getName());
          formData.append(&quot;upload_file&quot;, true);
  
          $.ajax({
              type: &quot;POST&quot;,
              beforeSend: function(request) {
                  request.setRequestHeader(&quot;Authorization&quot;, &quot;Bearer&quot; + &quot; &quot; + localStorage.getItem(&quot;accessToken&quot;));
              },
              url: &quot;https://www.googleapis.com/upload/drive/v2/files&quot;,
              data:{
                  uploadType:&quot;media&quot;
              },
              xhr: function () {
                  var myXhr = $.ajaxSettings.xhr();
                  if (myXhr.upload) {
                      myXhr.upload.addEventListener('progress', that.progressHandling, false);
                  }
                  return myXhr;
              },
              success: function (data) {
                  console.log(data);
              },
              error: function (error) {
                  console.log(error);
              },
              async: true,
              data: formData,
              cache: false,
              contentType: false,
              processData: false,
              timeout: 60000
          });
      };
  
      Upload.prototype.progressHandling = function (event) {
          var percent = 0;
          var position = event.loaded || event.position;
          var total = event.total;
          var progress_bar_id = &quot;#progress-wrp&quot;;
          if (event.lengthComputable) {
              percent = Math.ceil(position / total * 100);
          }
          // update progressbars classes so it fits your code
          $(progress_bar_id + &quot; .progress-bar&quot;).css(&quot;width&quot;, +percent + &quot;%&quot;);
          $(progress_bar_id + &quot; .status&quot;).text(percent + &quot;%&quot;);
      };
  
      $(&quot;#upload&quot;).on(&quot;click&quot;, function (e) {
          var file = $(&quot;#files&quot;)[0].files[0];
          var upload = new Upload(file);
  
          // maby check size or type here with upload.getSize() and upload.getType()
  
          // execute upload
          upload.doUpload();
      });
  });
  </code></pre>