How to Rename Files and Specify Upload Folder Using 'Call Web1 Post file' Method for Google Drive?

Discuss
#1

Is there a way to change the file name and specify the folder for uploading a file using the ‘Call Web1 Post file’ method?

image
image911×189 39.2 KB

From the image I sent, I can upload the file to Google Drive, but it ends up with the name ‘Untitled’ and is placed in ‘My Drive’ by default.

#2

See here

The web component cannot use multipart, therefore we have to send two web calls, the first (POSTFile) to upload the actual file (which is untitled and goes to the root folder of Google Drive), the second (PATCHtext) to send the metadata (filename, folderId) which correctly names the file, and moves it to the designated folder.

Taifun

1 Like
#3

Thank you, Taifun. However, it appears that the block patch is not available. I attempted to use the ‘put’ method, but it didn’t work as expected. Currently, I have two additional approaches:

  1. Utilize AppScript.
  2. Implement the method of sending the image by converting it to Base64.

Could you please provide further guidance or suggest an alternative solution?

#4

Steps to Upload a Base64 Image to Google Drive via Apps Script

:one: Google Apps Script (Backend)

  1. Open Google Apps Script.
  2. Create a New Project.
  3. Replace the default code with the following:

:small_blue_diamond: Apps Script to Handle Base64 Image Upload

javascript

function doPost(e) {
  try {
    var params = JSON.parse(e.postData.contents);
    var base64String = params.file;  // The Base64-encoded image
    var newFileName = params.filename || "Uploaded_File.jpg";
    var folderId = params.folderId || "YOUR_FOLDER_ID"; // Set default folder

    // Decode the Base64 string
    var decodedBlob = Utilities.newBlob(Utilities.base64Decode(base64String), "image/jpeg", newFileName);

    // Get the target folder
    var folder = DriveApp.getFolderById(folderId);

    // Create the file in Google Drive
    var file = folder.createFile(decodedBlob);

    return ContentService.createTextOutput(JSON.stringify({
      status: "success",
      fileId: file.getId(),
      fileUrl: file.getUrl()
    })).setMimeType(ContentService.MimeType.JSON);

  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({
      status: "error",
      message: error.toString()
    })).setMimeType(ContentService.MimeType.JSON);
  }
}

:two: Deploy the Script as a Web App

  1. Click Deploy > New Deployment.
  2. Select “Web App”.
  3. Set “Who has access” to “Anyone” or your preferred setting.
  4. Click Deploy and authorize permissions.
  5. Copy the Web App URL.

:three: Send a Base64 Image Using cURL

Convert your image to Base64 and send it via cURL.

:small_blue_diamond: Convert Image to Base64

Run the following command on Linux/macOS:

bash

base64 /path/to/image.jpg > image_base64.txt

On Windows (PowerShell):

powershell

[Convert]::ToBase64String((Get-Content -Path "C:\path\to\image.jpg" -Encoding byte)) > image_base64.txt

:small_blue_diamond: Send the Base64 Image via cURL 

curl -X POST "YOUR_WEB_APP_URL" \
  -H "Content-Type: application/json" \
  -d '{
    "file": "BASE64_ENCODED_STRING_HERE",
    "filename": "MyUploadedImage.jpg",
    "folderId": "YOUR_FOLDER_ID"
  }'

Replace "BASE64_ENCODED_STRING_HERE" with your actual Base64-encoded image.

:four: Expected JSON Response

If successful, you’ll get:

{
  "status": "success",
  "fileId": "1x2y3zABCDEF",
  "fileUrl": "https://drive.google.com/file/d/1x2y3zABCDEF/view"
}
1 Like
#5

1. Setup Google Apps Script for Handling File Uploads

Google Apps Script Code

javascript

function doPost(e) {
  try {
    var folderId = "YOUR_FOLDER_ID"; // Replace with your Google Drive folder ID
    var folder = DriveApp.getFolderById(folderId);
    
    var params = e.parameter;
    var fileBlob = e.postData.getBlob(); 
    var newFileName = params.filename || "default_name"; // Get filename from request or use default

    // Create file in the specified folder with the new name
    var file = folder.createFile(fileBlob).setName(newFileName);

    return ContentService.createTextOutput(JSON.stringify({
      success: true,
      fileId: file.getId(),
      fileName: file.getName(),
      fileUrl: file.getUrl()
    })).setMimeType(ContentService.MimeType.JSON);

  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({
      success: false,
      error: error.toString()
    })).setMimeType(ContentService.MimeType.JSON);
  }
}

2. Deploy as a Web App

  1. In Google Apps Script, click Deploy > New Deployment.
  2. Select Web app.
  3. Set Who has access to “Anyone” (or “Anyone with the link”).
  4. Copy the provided Web App URL.

3. Make a POST Request Using “Call Web1 Post file”

Your HTTP request should:

  • Include the file as multipart/form-data.
  • Pass the filename as a URL parameter.

Example cURL Request 

curl -X POST "YOUR_WEB_APP_URL?filename=new_uploaded_file.jpg" \
     -H "Content-Type: multipart/form-data" \
     -F "file=@/path/to/your/file.jpg"

4. Handling the Response

The script returns a JSON response with:

  • success: true or false
  • fileId: The uploaded file’s Google Drive ID
  • fileName: The new name of the file
  • fileUrl: The direct link to the uploaded file
2 Likes
#6

Thank you. If possible, I would prefer to use the Google Drive API. Would that be a viable option?

#7

Unfortunately Kodular does not offer it, App Inventor does… use a reliable builder which keeps adding functionality…

Alternatively for multipart/formdata try

Taifun

1 Like
#9

I think app script is the easiest and best way.

1 Like
#10

Thank you very much