Upload File to Google Drive Api Javascript

Welcome folks I am back with another blog post. In this post we volition be implementing How to Upload Files to Google Drive using Google Drive Residue API V3 from scratch. Google Drive is 1 of the most popular medium of storing your data in the mod world. For this application nosotros first of all need to create a project in Google Developers Console and become your client id and client hugger-mugger. This process is illustrated in the side by side steps in a detailed manner.
Then just create a new project by providing a sure name or y'all can select from the created projects.
After selecting the projection just click on create credentials and create a brand new OAuth Client ID.
Merely select the option of spider web application because nosotros are creating a web application which interacts with the Google Bulldoze API.
So in this merely provide localhost for the showtime field and the second field is of import it needs to be the same for your project yous can have dissimilar redirect url. Information technology is basically the url to which Google redirects you whenever the user grants admission to your application. Select it cautiously it needs to be aforementioned for your project.
Click on the create button to generate the client id and client secret. It will be dissimilar for you and don't share this with others. Only copy both and store it somewhere we will be using it subsequently in the application.
Subsequently that create your projection and inside your project create a brand new index.html file which will hold a simple push. For this projection we are using XAMMP for local server.
| ane ii 3 4 5 six seven 8 9 x 11 12 thirteen 14 15 16 17 xviii | < ! DOCTYPE html > < html > < caput > < meta charset = "utf-viii" / > < meta http - equiv = "X-UA-Compatible" content = "IE=edge" > < title > Git Login App < / title > < meta proper noun = "viewport" content = "width=device-width, initial-calibration=1" > <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </script> <script src = "chief.js" > </script> < / caput > < body > < div > < push button id = "login" > Upload Files to Drive < / push button > < / div > < / body > < / html > |
Afterward that create a new file main.js which will hold the logic for index.html. In this file we will redirect the user to the permissions folio where users can grant admission to your application.
| ane two 3 iv 5 half dozen seven viii 9 10 xi 12 13 fourteen 15 16 17 eighteen xix xx 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | $ ( certificate ) . prepare ( function ( ) { // client id of the projection var clientId = "" ; // redirect_uri of the projection var redirect_uri = "" ; // scope of the project var scope = "https://www.googleapis.com/auth/drive" ; // the url to which the user is redirected to var url = "" ; // this is event click listener for the push button $ ( "#login" ) . click ( function ( ) { // this is the method which volition be invoked it takes four parameters signIn ( clientId , redirect_uri , scope , url ) ; } ) ; office signIn ( clientId , redirect_uri , scope , url ) { // the bodily url to which the user is redirected to url = "https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=" + redirect_uri + "&prompt=consent&response_type=code&client_id=" + clientId + "&scope=" + scope + "&access_type=offline" ; // this line makes the user redirected to the url window . location = url ; } } ) ; |
The whole source lawmaking is full of comments and information technology is self explanatory we are using jQuery and as well merely replace the customer id , redirect_uri with your values respectively. When you lot relieve this and execute this yous will getting this output equally shown below.
As you tin see that whenever y'all execute this you volition be redirected to the screen where you want to select your google account from this list of accounts and later that it grants access to your account by allowing this you will be granting admission to this application. If you redirect_uri is unlike from the i you have mentioned in the Google Developers Console. You will getting this fault of redirect_uri.
After that create a make new file called equally upload.html which will be the actual redirect_uri to which the user will land after assuasive admission to the application. Simply create a new file upload.html and copy paste the code. And also create upload.css and copy paste the code of css.
| i 2 iii 4 v six 7 8 9 10 11 12 xiii 14 15 16 17 18 19 20 21 22 23 24 25 | < ! DOCTYPE html > < html > < caput > < meta charset = "utf-eight" / > < meta http - equiv = "X-UA-Compatible" content = "IE=edge" > < title > Git Login App < / title > < meta name = "viewport" content = "width=device-width, initial-scale=ane" > < link rel = "stylesheet" type = "text/css" media = "screen" href = "upload.css" / > <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </script> <script src = "upload.js" > </script> < / caput > < body > < div > < input id = "files" blazon = "file" proper name = "files[]" multiple / > < push button id = "upload" > Upload < / button > < div id = "progress-wrp" > < div class = "progress-bar" > < / div > < div class = "condition" > 0 % < / div > < / div > < / div > < div id = "result" > < / div > < / body > < / html > |
| 1 2 three 4 5 6 7 8 9 10 11 12 13 xiv 15 sixteen 17 18 19 20 21 22 23 24 25 26 27 | #progress-wrp { border : 1px solid #0099CC; padding : 1px ; position : relative ; height : 30px ; border - radius : 3px ; margin : 10px ; text - align : left ; background : #fff; box - shadow : inset 1px 3px 6px rgba ( 0 , 0 , 0 , 0.12 ) ; } #progress-wrp .progress-bar { height : 100 % ; border - radius : 3px ; background - color : #f39ac7; width : 0 ; box - shadow : inset 1px 1px 10px rgba ( 0 , 0 , 0 , 0.11 ) ; } #progress-wrp .condition { meridian : 3px ; left : fifty % ; position : absolute ; display : inline - cake ; color : #000000; } |
You can meet that there is a upload push button and too a button from which you lot can select files from your computer and upload it to your Google Bulldoze.
Only create a new upload.js file to create the logic whenever the upload button is clicked from the user. First of all we will commutation the authorization code which is generated in the previous stride with the access token. Access token are generally the medium from which we will making the requests to the API.
| 1 2 3 4 5 six 7 eight ix 10 11 12 13 14 15 16 17 18 19 twenty 21 22 23 24 25 26 27 28 29 thirty 31 32 33 34 35 36 37 38 39 xl 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 lxxx 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | $ ( document ) . ready ( function ( ) { const urlParams = new URLSearchParams ( window . location . search ) ; const code = urlParams . get ( 'code' ) ; const redirect_uri = "" // replace with your redirect_uri; const client_secret = "" ; // replace with your client secret const scope = "https://www.googleapis.com/auth/drive" ; var access_token = "" ; var client_id = "" // replace it with your client id; $ . ajax ( { type : 'Postal service' , url : "https://www.googleapis.com/oauth2/v4/token" , information : { lawmaking : code , redirect_uri : redirect_uri , client_secret : client_secret , client_id : client_id , telescopic : scope , grant_type : "authorization_code" } , dataType : "json" , success : function ( resultData ) { localStorage . setItem ( "accessToken" , resultData . access_token ) ; localStorage . setItem ( "refreshToken" , resultData . refreshToken ) ; localStorage . setItem ( "expires_in" , resultData . expires_in ) ; window . history . pushState ( { } , certificate . title , "/GitLoginApp/" + "upload.html" ) ; } } ) ; part stripQueryStringAndHashFromPath ( url ) { render url . split ( "?" ) [ 0 ] . split ( "#" ) [ 0 ] ; } var Upload = function ( file ) { this . file = file ; } ; Upload . prototype . getType = function ( ) { localStorage . setItem ( "blazon" , this . file . type ) ; render this . file . type ; } ; Upload . prototype . getSize = function ( ) { localStorage . setItem ( "size" , this . file . size ) ; return this . file . size ; } ; Upload . prototype . getName = function ( ) { return this . file . name ; } ; Upload . image . doUpload = function ( ) { var that = this ; var formData = new FormData ( ) ; // add assoc key values, this volition be posts values formData . append ( "file" , this . file , this . getName ( ) ) ; formData . append ( "upload_file" , true ) ; $ . ajax ( { type : "POST" , beforeSend : part ( request ) { asking . setRequestHeader ( "Authorization" , "Bearer" + " " + localStorage . getItem ( "accessToken" ) ) ; } , url : "https://www.googleapis.com/upload/drive/v2/files" , data : { uploadType : "media" } , xhr : function ( ) { var myXhr = $ . ajaxSettings . xhr ( ) ; if ( myXhr . upload ) { myXhr . upload . addEventListener ( 'progress' , that . progressHandling , faux ) ; } return myXhr ; } , success : function ( information ) { console . log ( data ) ; } , error : part ( error ) { panel . log ( error ) ; } , async : true , data : formData , cache : false , contentType : false , processData : simulated , timeout : 60000 } ) ; } ; Upload . prototype . progressHandling = function ( event ) { var pct = 0 ; var position = upshot . loaded || event . position ; var total = event . total ; var progress_bar_id = "#progress-wrp" ; if ( event . lengthComputable ) { percentage = Math . ceil ( position / total * 100 ) ; } // update progressbars classes so information technology fits your code $ ( progress_bar_id + " .progress-bar" ) . css ( "width" , + percent + "%" ) ; $ ( progress_bar_id + " .status" ) . text ( per centum + "%" ) ; } ; $ ( "#upload" ) . on ( "click" , function ( e ) { var file = $ ( "#files" ) [ 0 ] . files [ 0 ] ; var upload = new Upload ( file ) ; // maby check size or type here with upload.getSize() and upload.getType() // execute upload upload . doUpload ( ) ; } ) ; } ) ; |
You can run across that we take successfully uploaded the prototype to the google drive. My drive shows that i have uploaded the image right at present after pressing the upload push.
Congratulations we are done Uploading files to Google Drive using the Google Drive REST API V3 in Javascript from scratch. Thank you for reading this postal service and if y'all like reading this and wants to read more of this please subscribe the blog below to get all the notications.
Source: https://codingshiksha.com/how-to-upload-files-to-google-drive-in-javascript-using-google-drive-rest-api-v3
0 Response to "Upload File to Google Drive Api Javascript"
Enregistrer un commentaire