How to Upload Image to Google Drive or Google Sheet using HTML & Apps Script

| April 26, 2023 | Google Apps Script | No Comments

Learn how to easily upload image to Google Drive or upload image to Google Sheet using HTML and Apps Script. Our step-by-step guide will walk you through the process.

यदि आप Google Drive या Google Sheet में Images को अपलोड करना सीखना चाहते हैं, तो आपको HTML और Apps Script का उपयोग करना चाहिए। HTML का उपयोग करके आप Images को अपलोड कर सकते हैं और Apps Script का उपयोग करके आप Google Drive और Google Sheet के साथ Interact कर सकते हैं।

1. HTML Code for Image Upload to Google Drive or Sheet

सबसे पहले हमे HTML Code लिखना होगा जिसमे की हम एक Form Tag लेंगे और उसमे एक input type file का उपयोग करेंगे और एक सबमिट Button बनाएंगे , साथ ही मे कुछ Logic हमे JavaScript मे लिखना होंगे 

<html>
   <head><title>Image Upload Apps Script</title></head>
   <body>

      <form method="POST" action="https://script.google.com/macros/.../exec" >
        <div style="width:50%; margin:auto">
	   <H1>Image Upload Apps Script</H1>
	   <H3>Localhost to Google Drive</H3>
	   <img id="ImgPreview" style="width:100%;  border:1px solid black; height:350px;  margin-bottom:20px"></Img>
           <input type="file" name="image" onchange="FileOnChange(this)">
	   <input type="submit" value="Upload">
           <input type="hidden" name="ImgData" id="ImgData" >
	</div>
      </form>
   </body>
</html>
  • Form : जब हम Submit Button को क्लिक करे तो हमे Apps Script पर जाना हैं क्युकी हम जो Image Upload कर रहे हैं इसे हमे Drive या Sheet पर upload करना हैं इसलिए हम action मे जो Google Apps Script को Deploy कर लिंक लाएंगे उसे Paste कर देंगे ।
  • Img : इस Tag पर हमने जो Image upload की हैं उसे दिखाने के लिए इस Tag का उपयोग किया हैं ताकि आप Image upload करने से पहले उसका Preview देख सके ।
  • Input type file : File Choose करने के लिए हमने इस टैग का उपयोग किया हैं । इसके onchange पर हम Javascript का एक Function call करेंगे ।
  • Input type Submit : इस Tag का उपयोग कर जो हम Image का preview देख रहे हैं उसके Server पर यानि की Apps Script पर भेजेंगे ताकि वह आगे Image को Drive या Sheet पर Upload कर सके ।
  • Input type Hidden : इस Tag का उपयोग कर हम जो Image Upload होगी उसमे से उसका Binary data इस Hidden Tag पर रख लेंगे ताकि इस data को हम Blob मे बदल कर Image Create कर सके ।

इतना कर HTML File को save करे , जब हम Apps Script Code लिखेंगे और उसके बाद जब हम Project को Deploy करेंगे उस लिंक को हम form action पर सेट कर देंगे ।

उपरोक्त Code का Output कुछ इस प्रकार दिखाई देगा ।

Image Upload to Google Drive (HTML View)

2. JavaScript Code for Upload Image to Google Drive or Sheet

जैसे ही हम Image select करते हैं वैसे ही onchange पर JavaScript का यह Function call हो जाता हैं । इस function का उपयोग कर हमने जो Image Select की हैं उसके Raw data मे से कुछ Part को अलग निकाल कर उसे hidden column मे set कर Submit करते हैं ।

आप इस Script को उपरोक्त HTML के script tag मे लिखे या फिर आप अलग से एक फाइल बना कर script scr का उपयोग कर attach कर सकते हैं । 

function FileOnChange(p) {
   var file = p.files[0];                                 //01
   ImgSrc = URL.createObjectURL(file);                    //02
   document.getElementById("ImgPreview").src = ImgSrc;    //03

   let imgRead = new FileReader();                        //04


   imgRead.onload = function(e) {                         //05
   var AllData = e.target.result;                         //06
   var ImgData = AllData.split("base64,")[1];             //07
   document.getElementById("ImgData").value = ImgData;    //08
   }
   
   imgRead.readAsDataURL(file);                           //09
}
  • 01: जो आप Image Select करेंगे उस Array मे से First Image को File Variable मे set कर देंगे।
  • 02: इस Syntax से हम URL.createObjectURL का उपयोग कर एक Image Source बनाते हैं
  • 03: जो हमने Image Source बनाया हैं उसको Img tag पर सेट कर देते हैं ताकि Preview दिख सके।
  • 04: FileReader() का उपयोग कर हम जो Image हमारे द्वारा select की हैं उसके data को read करते हैं ।
  • 05: जब भी हम readAsDataURL function Call करेंगे । तब यह onload function call होगा।
  • 06: जो फाइल हमने Select किया हैं उसका सारा data AllData वाले Variable मे आ जाएगा।
  • 07: यहा पर हमने Image File के data को base64, से पहले का भाग और बाद के भाग को अलग अलग कर दिया हैं और दूसरे वाले भाग की वैल्यू को ImgData मे स्टोर कर दिया हैं ।
  • 08: हमने जो एक Hidden Input बनाया था उस पर उपरोक्त Data को सेट कर दिया हैं ।
  • 09: यहा से हमने readAsDataURL को Call किया ताकि उपरोक्त सभी Process चल सके ।

इतना करने के बाद आप जब ब्राउजर पर View देखेंगे तो कुछ इस प्रकार से दिखाई देगा ।

और साथ मे आप image select करेंगे तो Image का प्रीव्यू भी दिखाई देगा ।

Upload Image to Google Drive Preview

इसके बाद जब आप Upload Button को Click करेंगे तब आगे जो हम Apps Script Code लिखेंगे उससे Image Drive पर Upload हो जाएगी ।

3. Apps Script Code for Upload Image to Google Drive

इसके बाद आपको एक Google Sheet बनाना है ओर उसमे Menu मे से Extension select कर Apps Script ओपन करना हैं उसके बाद आपको निम्न Code को उसमे Paste करना है । 

function doPost(e) {
  var ImgNm   = e.parameter.image;                              //01
  var ImgData = e.parameter.ImgData;                            //02
  var Img64D  = Utilities.base64Decode(ImgData);                //03
  var ImgBlob = Utilities.newBlob(Img64D, 'image/jpeg',ImgNm);  //04

  DriveApp.createFile(ImgBlob);                                 //05
  return ContentService.createTextOutput("Upload Done");        //06 
}
  • 01: हमने HTML से जो Form Submit किया था उसमे एक input का नाम image लिया था उसे हमने एक Variable ImgNm मे लिया हैं ।
  • 02: यहा पर हमने जो ImgData Variable लिया था Hidden वाला उसे ImgData Variable मे स्टोर किया हैं ।
  • 03: यहा पर हमने जो ImgData हमारे पास आया उसे base64Decode का उपयोग कर Decode कर लिया हैं ।
  • 04: Decoded data से हमने एक ImgBlob Create किया हैं ।
  • 05: ImgBlob का उपयोग कर हमने DriveApp पर एक File Create कर दी हैं ।
  • 06: यहा से हमने Upload Done का Message Return किया हैं।

इतना करने के बाद आप इस Project को Deploy करे और जो Deploy करने के बाद लिंक आए उसे HTML File के Form Tag के action Attribute कर paste करना हैं ।

Apps Script के Page को कैसे Deploy करते हैं जानने के लिए यहाँ क्लिक करे ।

जब आप Finnaly इसे टेस्ट करेंगे तो आपको Google Drive पर Image upload हो चुकी होगी, जो की कुछ इस तरह से दिखाई देगी ।

Upload Image to Google Drive (Drive View)

यहाँ तक की स्क्रिप्ट से Upload Image to Google Drive Complete होता हैं यदि आप Upload Image to Google Sheet करना चाहते हैं तब पहले के दो Steps तो वैसे ही रहेंगे केवल इस Third Step के स्थान पर आप Step 4 को Follow करे ।

4. Apps Script Code for Upload Image to Google Sheet

उपरोक्त Process मे हमने Image को Drive पर upload किया था उसी Code मे हमने थोड़ा सा बदलाव कर जो Blob बनाया था उसे Google Sheet पर Insert कर दिया हैं,

इसके लिए भी आपको एक Google Sheet बनाना है ओर उसमे Menu मे से Extension select कर Apps Script ओपन करना हैं उसके बाद आपको निम्न Code को उसमे Paste करना है ।

function doPost(e) {
  var ImgNm   = e.parameter.image;                              //01
  var ImgData = e.parameter.ImgData;                            //02
  var Img64D  = Utilities.base64Decode(ImgData);                //03
  var ImgBlob = Utilities.newBlob(Img64D, 'image/jpeg',ImgNm);  //04
  var sheet = SpreadsheetApp.getActiveSheet();                  //05
  sheet.insertImage(ImgBlob,2,2);                               //06
  return ContentService.createTextOutput("Upload Done");        //07
}
  • 01: हमने HTML से जो Form Submit किया था उसमे एक input का नाम image लिया था उसे हमने एक Variable ImgNm मे लिया हैं ।
  • 02: यहा पर हमने जो ImgData Variable लिया था Hidden वाला उसे ImgData Variable मे स्टोर किया हैं ।
  • 03: यहा पर हमने जो ImgData हमारे पास आया उसे base64Decode का उपयोग कर Decode कर लिया हैं ।
  • 04: Decoded data से हमने एक ImgBlob Create किया हैं ।
  • 05: यहा पर हमने जो हमारी Active Sheet उसको एक Variable sheet मे Store किया हैं ।
  • 06: उपरोक्त sheet Variable मे हमने insertImage का उपयोग कर 2 number की Row और 2 number के column पर ImgBlob को Insert किया हैं ।
  • 07: यहा से हमने Upload Done का Message Return किया हैं।

अब जब आप उपरोक्त Code को Deploy कर इसकी लिंक को HTML Form Action पर Paste कर Browser पर Preview देखेंगे तो कुछ इस प्रकार दिखाई देगा।

Upload Image to Google Sheet

Step 3 और Step 4 मे केवल इतना ही अंतर हैं की एक मे हमने Blob से Drive मे File बना दी हैं और दूसरे मे हमने Blob से Google Sheet मे Cell पर Image को insert किया हैं । यहा तक Image Upload to Google Sheet Complete हुआ ।

इस Article मे हमने किस तरह से Upload Image to Google Drive और Upload Image to Google Sheet कर सकते हैं उसके बारे मे बताया हैं आशा हैं की आपको यह Article How to Upload Image to Google Drive or Google Sheet using HTML & Apps Script बहुत अच्छे से समझ मे आ गया होगा।

आपको यह Article (How to Upload Image to Google Drive or How to Upload Image Google Sheet using HTML & Apps Script) कैसा लगा ? बताना न भूले, मिलते हैं Next Article मे Thanks for Reading ।

हमारे अन्य आर्टिकल

Related Posts

Add a Comment

Your email address will not be published. Required fields are marked *