jQuery Ajax File Upload with Progress Bar

File upload should always have a progress bar. It is a feature that most of the developers ignore. It should be seen as part of the functionality. The users cannot sit in the dark and keep guessing about the background progress.

When the user requests the server to perform some operation, it is good to show them about the progress. It is a good UI/UX behaviour. The progress bar is one of the best ways to show the status of the in-progress operation. In this example, let us learn to create a progress bar using jQuery while uploading a file via AJAX.

A file input option is used to choose the file and the file binaries are posted to the server via AJAX. After sending the file upload request to the server, the AJAX script initializes jQuery animation to show the file upload progress bar. The progress bar will highlight the progressing percentage with jQuery animation. The jQuery Form plugin is used in this example code to handle the AJAX image upload with progressive status.

HTML Form with File Upload

The landing page will show a HTML form with the file input. Users will choose the file and post the file data by submitting the form via AJAX. The jQuery and jQuery Form library is included at the beginning of the script. A minimal jQuery validation script is added to check if the image file had been chosen before submitting the form.

AJAX Form Submit to Request Server File Upload with Progress bar

The jQuery form library is used to submit the form via AJAX with an animated progress bar. The ajaxForm() function is used to submit the image file binaries to the PHP. The progress of the image upload is shown with a progress bar in the uploadProgress callback function. Also, the jQuery animate() method is called to create the progressing effect on the progress bar element.

 

How to upload a file in Zoho using python?

UploadFile API Method of Zoho CRM

Table of Contents

  • Purpose
  • Request URL
  • Request Parameters
  • Python Code to Upload a file to a record
  • Sample Response

Purpose

You can use this method to attach files to records.

Request URL

XML Format:
https://crm.zoho.com/crm/private/xml/Leads/uploadFile?authtoken=Auth Token&scope=crmapi&id=Record Id&content=File Input Stream

JSON Format:
https://crm.zoho.com/crm/private/json/Leads/uploadFile?authtoken=Auth Token&scope=crmapi&id=Record Id&content=File Input Stream

Request Parameters

Parameter Data Type Description
authtoken* String Encrypted alphanumeric string to authenticate your Zoho credentials.
scope* String Specify the value as crmapi
id* String Specify unique ID of the “record” or “note” to which the file has to be attached.
content FileInputStream Pass the File Input Stream of the file
attachmentUrl String Attach a URL to a record.

* – Mandatory parameter

Important Note:

  • The total file size should not exceed 20 MB.
  • Your program can request only up to 60 uploadFile calls per min. If API User requests more than 60 calls, system will block the API access for 5 min.
  • If the size exceeds 20 MB, you will receive the following error message: “File size should not exceed 20 MB“. This limit does not apply to URLs attached via attachmentUrl.
  • The attached file will be available under the Attachments section in the Record Details Page.
  • Files can be attached to records in all modules except Reports, Dashboards and Forecasts.
  • In the case of the parameter attachmentUrl, content is not required as the attachment is from a URL.
    Example for attachmentUrl: crm/private/xml/Leads/uploadFile?authtoken=*****&scope=crmapi&id=<entity_id>&attachmentUrl=<insert_ URL>

Python Code to Upload a file to a record

Here’s a simple script that you can use to upload a file in zoho using python.

Go to https://pypi.python.org/pypi/MultipartPostHandler2/0.1.5 and get the egg file and install it.

In the program, you need to specify values for the following:
  • Your Auth Token
  • The ID of the Record
  • The uploadFile Request URL in the format mentioned above
  • The File Path i.e the location of the File

Sample Response