{"id":21483,"date":"2022-06-30T16:21:00","date_gmt":"2022-06-30T23:21:00","guid":{"rendered":"http:\/\/file_upload_with_ajax"},"modified":"2025-10-15T12:45:03","modified_gmt":"2025-10-15T19:45:03","slug":"file_upload_with_ajax","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax","title":{"rendered":"AJAX File Upload &#8211; Quick Tutorial and Time Saving Tips"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>AJAX <a href=\"https:\/\/cloudinary.com\/blog\/automating_file_upload_and_sharing\">file upload<\/a> is the process of uploading files from a local computer to a server. When a user selects a file in the browser and clicks the submit button, the browser copies the file from the local machine and sends it to the server. The server then saves the file to the specified location.<\/p>\n<p>In this article, you\u2019ll find:<\/p>\n<ul>\n<li>How to perform a PHP AJAX file upload<\/li>\n<li>A useful JavaScript AJAX file upload example<\/li>\n<li>An AJAX file upload example using Cloudinary for free<\/li>\n<\/ul>\n<p>The HTML form tag has an action attribute pointing to the script that will take care of the actual upload process. The form tag also has a method attribute that specifies the kind of operation this form will undertake, which is POST. AJAX uses the browser\u2019s built-in XMLHttpRequest object to request data from the web server. It also uses JS and HTML DOM to use and display the data.<\/p>\n<p>Web apps built using AJAX are efficient because they can quickly send and fetch data from the server without affecting the display of the existing page. Files can be uploaded to a backend server or directly to the cloud using a solution like <a href=\"https:\/\/cloudinary.com\/platform\">Cloudinary<\/a>.<\/p>\n<p>There are the general steps for uploading a file using AJAX:<\/p>\n<ul>\n<li>Set up an instance for XMLHttpRequest.<\/li>\n<li>Set up objects for various XMLHttpRequest handlers.<\/li>\n<li>Set an AJAX request to send data to the back end.<\/li>\n<li>Validate the form.<\/li>\n<li>Provide feedback to the user.<\/li>\n<\/ul>\n<p>To make this process easier, you can use Cloudinary, a cloud-based, end-to-end media-management solution that can easily create, manage and deliver their digital experiences across any browser, device and bandwidth. Make sure you try this yourself, claim your <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">free Cloudinary account<\/a> now.<\/p>\n<p>This article describes how easy it is to do an AJAX file upload with Cloudinary using only a few lines of code and no need for any of the above tasks.<\/p>\n<h2>Preliminary Steps<\/h2>\n<p>As a first step, create a <a href=\"https:\/\/cloudinary.com\/users\/register\/free\"><strong>free<\/strong> Cloudinary account<\/a>, which includes a dashboard, a unique cloud name for you, an API key, and an API secret, which you\u2019ll need to work with Cloudinary.<\/p>\n<p>Subsequently, create an <a href=\"https:\/\/cloudinary.com\/documentation\/upload_presets\">upload preset<\/a>, which defines the options that apply to all your uploads.<\/p>\n<h2>Direct Ajax File Uploads With Cloudinary<\/h2>\n<p>Follow these simple steps:<\/p>\n<p><strong>Create an HTML form.<\/strong><\/p>\n<p>In your root directory, create an HTML form (an <code>index.html<\/code> file) with the following code, which contains the fields for file uploads:<\/p>\n<p><strong><code>index.html<\/code><\/strong><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>AJAX File Uploads With Cloudinary<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"file-form\"<\/span> <span class=\"hljs-attr\">action<\/span>=<span class=\"hljs-string\">\"fileUpload.php\"<\/span> <span class=\"hljs-attr\">method<\/span>=<span class=\"hljs-string\">\"post\"<\/span> <span class=\"hljs-attr\">enctype<\/span>=<span class=\"hljs-string\">\"multipart\/form-data\"<\/span>&gt;<\/span>\n        Upload a File:\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"myfile\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"myfile\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"submit\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"submit\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"Upload File Now\"<\/span> &gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"status\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"fileUpload.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>You now have a form with the following elements:<\/p>\n<ul>\n<li>An <code>input<\/code> field and a <code>submit<\/code> button.<\/li>\n<li>An <code>action<\/code> attribute\u2014within the <code>form<\/code> tag\u2014that points to the script that handles the upload.<\/li>\n<li>A <code>method<\/code> attribute that specifies the operation <code>post<\/code> undertaken by this form.<\/li>\n<li>An <code>enctype<\/code> attribute, whose value specifies the content type of the upload. Here, because the task in question is to upload files, do <strong>not<\/strong> specify the <code>enctype<\/code> attribute.<\/li>\n<li>An <code>id<\/code> attribute for both input fields, which handle the form elements with JavaScript.<\/li>\n<\/ul>\n<p><strong>Add the Cloudinary JavaScript library.<\/strong><\/p>\n<p>JavaScript plugins on Cloudinary facilitate image uploads to its server. Include them in your <code>index.html<\/code> file, like this:<\/p>\n<pre class=\"js-syntax-highlighted\"><code> &lt;script src='https:\/\/cdn.jsdelivr.net\/jquery.cloudinary\/1.0.18\/jquery.cloudinary.js' type='text\/javascript'&gt;&lt;\/script&gt;\n &lt;script src=&quot;\/\/widget.cloudinary.com\/global\/all.js&quot; type=&quot;text\/javascript&quot;&gt;&lt;\/script&gt;\n<\/code><\/pre>\n<h3>Specify Direct Uploads<\/h3>\n<p>Create a file called <code>fileUpload.js<\/code> with the following in the root directory:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">$(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    <span class=\"hljs-comment\">\/\/ Configure Cloudinary<\/span>\n    <span class=\"hljs-comment\">\/\/ with the credentials on<\/span>\n    <span class=\"hljs-comment\">\/\/ your Cloudinary dashboard<\/span>\n    $.cloudinary.config({ <span class=\"hljs-attr\">cloud_name<\/span>: <span class=\"hljs-string\">'YOUR_CLOUD_NAME'<\/span>, <span class=\"hljs-attr\">api_key<\/span>: <span class=\"hljs-string\">'YOUR_API_KEY'<\/span>});\n    <span class=\"hljs-comment\">\/\/ Upload button<\/span>\n    <span class=\"hljs-keyword\">var<\/span> uploadButton = $(<span class=\"hljs-string\">'#submit'<\/span>);\n    <span class=\"hljs-comment\">\/\/ Upload-button event<\/span>\n    uploadButton.on(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">e<\/span>)<\/span>{\n        <span class=\"hljs-comment\">\/\/ Initiate upload<\/span>\n        cloudinary.openUploadWidget({ <span class=\"hljs-attr\">cloud_name<\/span>: <span class=\"hljs-string\">'YOUR_CLOUD_NAME'<\/span>, <span class=\"hljs-attr\">upload_preset<\/span>: <span class=\"hljs-string\">'YOUR_UPLOAD_PRESET'<\/span>, <span class=\"hljs-attr\">tags<\/span>: &#91;<span class=\"hljs-string\">'cgal'<\/span>]}, \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">error, result<\/span>) <\/span>{ \n            <span class=\"hljs-keyword\">if<\/span>(error) <span class=\"hljs-built_in\">console<\/span>.log(error);\n            <span class=\"hljs-comment\">\/\/ If NO error, log image data to console<\/span>\n            <span class=\"hljs-keyword\">var<\/span> id = result&#91;<span class=\"hljs-number\">0<\/span>].public_id;\n            <span class=\"hljs-built_in\">console<\/span>.log(processImage(id));\n        });\n    });\n})\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">processImage<\/span>(<span class=\"hljs-params\">id<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">var<\/span> options = {\n        <span class=\"hljs-attr\">client_hints<\/span>: <span class=\"hljs-literal\">true<\/span>,\n    };\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">'&lt;img src=\"'<\/span>+ $.cloudinary.url(id, options) +<span class=\"hljs-string\">'\" style=\"width: 100%; height: auto\"\/&gt;'<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Be sure to replace the <code>YOUR_CLOUD_NAME<\/code>, <code>YOUR_UPLOAD_PRESET<\/code>, and <code>YOUR_API_KEY<\/code> variables with their values from your Cloudinary dashboard.<\/p><\/div>\n<h2>PHP Ajax File Upload to a Backend Server<\/h2>\n<p>To handle file uploads with AJAX and store the files on a backend server (e,g PHP Server), create an HTML form <strong>and<\/strong> two upload scripts: one written in JavaScript and the other in PHP.:<\/p>\n<p><strong>HTML form<\/strong>\nIn your root directory, build an HTML form (an <code>index.html<\/code> file) with the following code, which contains the fields for file uploads:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">\n<span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>File Uploads With AJAX<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"file-form\"<\/span> <span class=\"hljs-attr\">action<\/span>=<span class=\"hljs-string\">\"fileUpload.php\"<\/span> <span class=\"hljs-attr\">method<\/span>=<span class=\"hljs-string\">\"post\"<\/span> <span class=\"hljs-attr\">enctype<\/span>=<span class=\"hljs-string\">\"multipart\/form-data\"<\/span>&gt;<\/span>\n        Upload a File:\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"myfile\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"myfile\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"submit\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"submit\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"Upload File Now\"<\/span> &gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"status\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/javascript\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"fileUpload.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><strong>Note the following:<\/strong><\/p>\n<ul>\n<li>The form contains an <code>input<\/code> field and a <code>submit<\/code> button.\n<ul>\n<li>The <code>form<\/code> tag has an <code>action<\/code>** attribute that points to the script that will take care of the actual upload process. It also has a <code>method<\/code> attribute that specifies the kind of operation this form will undertake, which is <code>post<\/code>.<\/li>\n<li>An <code>enctype<\/code> attribute, whose value specifies the content type of the upload. Here, because the task in question is to upload files, do <strong>not<\/strong> specify the <code>enctype<\/code> attribute.<\/li>\n<li>An <code>id<\/code> attribute for both input fields, which handles the form elements with JavaScript.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>JavaScript AJAX File Upload Example<\/strong><\/p>\n<p>In your root directory, create a file called <code>fileUpload.js<\/code> with the following code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>)<\/span>{\n    <span class=\"hljs-keyword\">var<\/span> form = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'file-form'<\/span>);\n    <span class=\"hljs-keyword\">var<\/span> fileSelect = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'myfile'<\/span>);\n    <span class=\"hljs-keyword\">var<\/span> uploadButton = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'submit'<\/span>);\n    <span class=\"hljs-keyword\">var<\/span> statusDiv = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'status'<\/span>);\n\n    form.onsubmit = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">event<\/span>) <\/span>{\n        event.preventDefault();\n\n        statusDiv.innerHTML = <span class=\"hljs-string\">'Uploading . . . '<\/span>;\n\n        <span class=\"hljs-comment\">\/\/ Get the files from the input<\/span>\n        <span class=\"hljs-keyword\">var<\/span> files = fileSelect.files;\n\n        <span class=\"hljs-comment\">\/\/ Create a FormData object.<\/span>\n        <span class=\"hljs-keyword\">var<\/span> formData = <span class=\"hljs-keyword\">new<\/span> FormData();\n\n        <span class=\"hljs-comment\">\/\/Grab only one file since this script disallows multiple file uploads.<\/span>\n        <span class=\"hljs-keyword\">var<\/span> file = files&#91;<span class=\"hljs-number\">0<\/span>]; \n\n        <span class=\"hljs-comment\">\/\/Check the file type.<\/span>\n        <span class=\"hljs-keyword\">if<\/span> (!file.type.match(<span class=\"hljs-string\">'image.*'<\/span>)) {\n            statusDiv.innerHTML = <span class=\"hljs-string\">'You cannot upload this file because it\u2019s not an image.'<\/span>;\n            <span class=\"hljs-keyword\">return<\/span>;\n        }\n\n        <span class=\"hljs-keyword\">if<\/span> (file.size &gt;= <span class=\"hljs-number\">2000000<\/span> ) {\n            statusDiv.innerHTML = <span class=\"hljs-string\">'You cannot upload this file because its size exceeds the maximum limit of 2 MB.'<\/span>;\n            <span class=\"hljs-keyword\">return<\/span>;\n        }\n\n         <span class=\"hljs-comment\">\/\/ Add the file to the AJAX request.<\/span>\n        formData.append(<span class=\"hljs-string\">'myfile'<\/span>, file, file.name);\n\n        <span class=\"hljs-comment\">\/\/ Set up the request.<\/span>\n        <span class=\"hljs-keyword\">var<\/span> xhr = <span class=\"hljs-keyword\">new<\/span> XMLHttpRequest();\n\n        <span class=\"hljs-comment\">\/\/ Open the connection.<\/span>\n        xhr.open(<span class=\"hljs-string\">'POST'<\/span>, <span class=\"hljs-string\">'\/fileUpload.php'<\/span>, <span class=\"hljs-literal\">true<\/span>);\n    \n\n        <span class=\"hljs-comment\">\/\/ Set up a handler for when the task for the request is complete.<\/span>\n        xhr.onload = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\n          <span class=\"hljs-keyword\">if<\/span> (xhr.status === <span class=\"hljs-number\">200<\/span>) {\n            statusDiv.innerHTML = <span class=\"hljs-string\">'Your upload is successful..'<\/span>;\n          } <span class=\"hljs-keyword\">else<\/span> {\n            statusDiv.innerHTML = <span class=\"hljs-string\">'An error occurred during the upload. Try again.'<\/span>;\n          }\n        };\n\n        <span class=\"hljs-comment\">\/\/ Send the data.<\/span>\n        xhr.send(formData);\n    }\n})();\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Step by step, the process proceeds as follows:<\/p>\n<p>Grab all the elements, i.e., the form, the file-input, and <code>status div<\/code>, as reflected in this code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n    <span class=\"hljs-keyword\">var<\/span> form = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'file-form'<\/span>);\n    <span class=\"hljs-keyword\">var<\/span> fileSelect = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'myfile'<\/span>);\n    <span class=\"hljs-keyword\">var<\/span> statusDiv = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'status'<\/span>);\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Call the form\u2019s <code>onsubmit<\/code> event. After the user has submitted the form, attach an event handler to the form:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">form.onsubmit = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">event<\/span>) <\/span>{\n\u2026.\n\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Get hold of the file specified by the user and, for a robust experience, keep that user informed of what\u2019s transpiring behind the scenes, like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n\u2026.\n\n statusDiv.innerHTML = <span class=\"hljs-string\">'Uploading . . . '<\/span>;\n\n  <span class=\"hljs-comment\">\/\/ Picking up files from the input .  .  .<\/span>\n  <span class=\"hljs-keyword\">var<\/span> files = fileSelect.files;\n\n <span class=\"hljs-comment\">\/\/ Uploading only one file; multiple uploads are not allowed.<\/span>\n  <span class=\"hljs-keyword\">var<\/span> file = files&#91;<span class=\"hljs-number\">0<\/span>]; \n\n...\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Create a <code>form<\/code> object, validate the size and type of the file to be uploaded, and add the file to <code>form<\/code>, like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">\n        <span class=\"hljs-comment\">\/\/ Create a FormData object.<\/span>\n        <span class=\"hljs-keyword\">var<\/span> formData = <span class=\"hljs-keyword\">new<\/span> FormData();\n\n\n        <span class=\"hljs-comment\">\/\/Check the file type.<\/span>\n        <span class=\"hljs-keyword\">if<\/span> (!file.type.match(<span class=\"hljs-string\">'image.*'<\/span>)) {\n            statusDiv.innerHTML = <span class=\"hljs-string\">''<\/span>You cannot upload this file because it\u2019s not an image.<span class=\"hljs-string\">';\n            return;\n        }\n\n        if (file.size &gt;= 2000000 ) {\n            statusDiv.innerHTML = '<\/span>You cannot upload this file because its size exceeds the maximum limit of <span class=\"hljs-number\">2<\/span> MB.<span class=\"hljs-string\">';\n            return;\n        }\n\n         \/\/ Add the file to the request.\n        formData.append('<\/span>myfile<span class=\"hljs-string\">', file, file.name);\n<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Set up an AJAX request, open a connection, and listen for the <code>onload<\/code> event of the <code>xhr<\/code> object.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">\n\u2026\n<span class=\"hljs-comment\">\/\/ Set up an AJAX request.<\/span>\n        <span class=\"hljs-keyword\">var<\/span> xhr = <span class=\"hljs-keyword\">new<\/span> XMLHttpRequest();\n\n        <span class=\"hljs-comment\">\/\/ Open the connection.<\/span>\n        xhr.open(<span class=\"hljs-string\">'POST'<\/span>, <span class=\"hljs-string\">'\/fileUpload.php'<\/span>, <span class=\"hljs-keyword\">true<\/span>);\n    \n\n        <span class=\"hljs-comment\">\/\/ Set up a handler for when the task for the request is complete.<\/span>\n        xhr.onload = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-params\">()<\/span> <\/span>{\n          <span class=\"hljs-keyword\">if<\/span> (xhr.status === <span class=\"hljs-number\">200<\/span>) {\n            statusDiv.innerHTML = Your upload is successful.<span class=\"hljs-string\">';\n          } else {\n            statusDiv.innerHTML = '<\/span>An error occurred <span class=\"hljs-keyword\">while<\/span> uploading the file...<span class=\"hljs-keyword\">Try<\/span> again<span class=\"hljs-string\">';\n          }\n        };\n\n        \/\/ Send the Data.\n        xhr.send(formData);\n<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Here, you make a <code>post<\/code> request to <code>fileUpload.php<\/code>. And yes, you must still process the file on the back end, to which the AJAX request submits the file for processing.<\/p>\n<p>Before leveraging the preceding code for production, you must make provisions for several edge cases, for example, perform checks to ensure that only safe files are posted to your back end.<\/p>\n<p><strong>PHP script<\/strong><\/p>\n<p>Below is the script written in PHP.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span>\n    $currentDir = getcwd();\n    $uploadDirectory = <span class=\"hljs-string\">\"\/uploads\/\"<\/span>;\n\n    $errors = &#91;]; <span class=\"hljs-comment\">\/\/ Store all foreseen and unforeseen errors here.<\/span>\n\n    $fileExtensions = &#91;<span class=\"hljs-string\">'jpeg'<\/span>,<span class=\"hljs-string\">'jpg'<\/span>,<span class=\"hljs-string\">'png'<\/span>]; <span class=\"hljs-comment\">\/\/ Get all the file extensions.<\/span>\n\n    $fileName = $_FILES&#91;<span class=\"hljs-string\">'myfile'<\/span>]&#91;<span class=\"hljs-string\">'name'<\/span>];\n    $fileSize = $_FILES&#91;<span class=\"hljs-string\">'myfile'<\/span>]&#91;<span class=\"hljs-string\">'size'<\/span>];\n    $fileTmpName  = $_FILES&#91;<span class=\"hljs-string\">'myfile'<\/span>]&#91;<span class=\"hljs-string\">'tmp_name'<\/span>];\n    $fileType = $_FILES&#91;<span class=\"hljs-string\">'myfile'<\/span>]&#91;<span class=\"hljs-string\">'type'<\/span>];\n    $fileExtension = strtolower(end(explode(<span class=\"hljs-string\">'.'<\/span>,$fileName)));\n\n    $uploadPath = $currentDir . $uploadDirectory . basename($fileName); \n\n    <span class=\"hljs-keyword\">echo<\/span> $uploadPath;\n\n    <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">isset<\/span>($fileName)) {\n\n        <span class=\"hljs-keyword\">if<\/span> (! in_array($fileExtension,$fileExtensions)) {\n            $errors&#91;] = <span class=\"hljs-string\">\"This process does not support this file type. Upload a JPEG or PNG file only.\"<\/span>;\n        }\n      \n        <span class=\"hljs-keyword\">if<\/span> ($fileSize &gt; <span class=\"hljs-number\">2000000<\/span>) {\n            $errors&#91;] = <span class=\"hljs-string\">\"You cannot upload this file because its size exceeds the maximum limit of 2 MB.\"<\/span>;\n        }\n\n        <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">empty<\/span>($errors)) {\n            $didUpload = move_uploaded_file($fileTmpName, $uploadPath);\n\n            <span class=\"hljs-keyword\">if<\/span> ($didUpload) {\n                <span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-string\">\"The file \"<\/span> . basename($fileName) . <span class=\"hljs-string\">\" has been uploaded.\"<\/span>;\n            } <span class=\"hljs-keyword\">else<\/span> {\n                <span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-string\">\"An error occurred. Try again or contact your system administrator.\"<\/span>;\n            }\n        } <span class=\"hljs-keyword\">else<\/span> {\n            <span class=\"hljs-keyword\">foreach<\/span> ($errors <span class=\"hljs-keyword\">as<\/span> $error) {\n                <span class=\"hljs-keyword\">echo<\/span> $error . <span class=\"hljs-string\">\"These are the errors\"<\/span> . <span class=\"hljs-string\">\"\\n\"<\/span>;\n            }\n        }\n    }\n\n    \n<span class=\"hljs-meta\">?&gt;<\/span><\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Ensure you are running a PHP server:<\/p><\/div>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_400,c_fill,f_auto,q_auto\/dpr_2.0\/php_server.png\" alt=\"Image of coding on a computer showing a php ajax file upload\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"800\" height=\"62\"\/><\/p>\n<p>Now when you run that PHP app, it looks like this:\n<img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_400,c_fill,f_auto,q_auto\/dpr_2.0\/run_application.png\" alt=\"Image of php ajax file upload example\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"800\" height=\"574\"\/><\/p>\n<p>In addition, note the following:<\/p>\n<ul>\n<li>The PHP script works for image files only.<\/li>\n<li>The file-size limit is a file 2 MB.<\/li>\n<\/ul>\n<p>Upload images to a dedicated file server in addition to the server in which your web app resides. Check out this <a href=\"https:\/\/github.com\/unicodeveloper\/cld-php-file-upload-proc\">source code<\/a> for a related tutorial.<\/p>\n<h2>Conclusion<\/h2>\n<p>Uploading AJAX files with Cloudinary is a cakewalk. Even though mastering AJAX technologies could be challenging, you can take advantage of them readily with the Cloudinary library for your app. Give it a try: <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">signing up for Cloudinary<\/a> is free.<\/p>\n<hr \/>\n<h2>Want to Learn More About File Uploads?<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/automating_file_upload_and_sharing\">Automating File Upload and Sharing<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/file_upload_with_php\">Uploading PHP Files and Rich Media the Easy Way<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax\">AJAX File Upload &#8211; Quick Tutorial &amp; Time Saving Tips<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/impressed_by_whatsapp_technology_build_a_whatsapp_clone_with_image_and_video_upload\">Impressed by WhatsApp technology? Clone WhatsApp Technology to Build a File Upload Android App<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery\">Direct Image Uploads From the Browser to the Cloud With jQuery<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/file_upload_with_angular_or_angularjs_to_cloudinary\">File Upload With Angular to Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/uploading_vue_files_and_rich_media_in_two_easy_steps\">Uploading Vue Files and Rich Media in Two Easy Steps<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/node_js_file_upload_to_a_local_server_or_to_the_cloud\">Node.js File Upload To a Local Server Or to the Cloud<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/laravel_file_upload_to_a_local_server_or_to_the_cloud\">Laravel File Upload to a Local Server Or to the Cloud<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/javascript_file_upload_to_cloudinary\">JavaScript File Upload in Two Simple Step<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21484,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[426,119,263],"class_list":["post-21483","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-featured","tag-file-upload","tag-sdk"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>AJAX File Upload - Quick Tutorial and Time Saving Tips<\/title>\n<meta name=\"description\" content=\"This step-by step guide walks you through the basic ajax file upload process, with examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AJAX File Upload - Quick Tutorial and Time Saving Tips\" \/>\n<meta property=\"og:description\" content=\"This step-by step guide walks you through the basic ajax file upload process, with examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-30T23:21:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-15T19:45:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720625\/Web_Assets\/blog\/Ajax-Blog-Cover_2000x1100\/Ajax-Blog-Cover_2000x1100.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"AJAX File Upload &#8211; Quick Tutorial and Time Saving Tips\",\"datePublished\":\"2022-06-30T23:21:00+00:00\",\"dateModified\":\"2025-10-15T19:45:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720625\/Web_Assets\/blog\/Ajax-Blog-Cover_2000x1100\/Ajax-Blog-Cover_2000x1100.jpg?_i=AA\",\"keywords\":[\"Featured\",\"File-upload\",\"SDK\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax\",\"url\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax\",\"name\":\"AJAX File Upload - Quick Tutorial and Time Saving Tips\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720625\/Web_Assets\/blog\/Ajax-Blog-Cover_2000x1100\/Ajax-Blog-Cover_2000x1100.jpg?_i=AA\",\"datePublished\":\"2022-06-30T23:21:00+00:00\",\"dateModified\":\"2025-10-15T19:45:03+00:00\",\"description\":\"This step-by step guide walks you through the basic ajax file upload process, with examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720625\/Web_Assets\/blog\/Ajax-Blog-Cover_2000x1100\/Ajax-Blog-Cover_2000x1100.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720625\/Web_Assets\/blog\/Ajax-Blog-Cover_2000x1100\/Ajax-Blog-Cover_2000x1100.jpg?_i=AA\",\"width\":1540,\"height\":847,\"caption\":\"Image of computer screen showing Ajax upload file bursting out\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AJAX File Upload &#8211; Quick Tutorial and Time Saving Tips\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"AJAX File Upload - Quick Tutorial and Time Saving Tips","description":"This step-by step guide walks you through the basic ajax file upload process, with examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax","og_locale":"en_US","og_type":"article","og_title":"AJAX File Upload - Quick Tutorial and Time Saving Tips","og_description":"This step-by step guide walks you through the basic ajax file upload process, with examples.","og_url":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-30T23:21:00+00:00","article_modified_time":"2025-10-15T19:45:03+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720625\/Web_Assets\/blog\/Ajax-Blog-Cover_2000x1100\/Ajax-Blog-Cover_2000x1100.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax"},"author":{"name":"","@id":""},"headline":"AJAX File Upload &#8211; Quick Tutorial and Time Saving Tips","datePublished":"2022-06-30T23:21:00+00:00","dateModified":"2025-10-15T19:45:03+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720625\/Web_Assets\/blog\/Ajax-Blog-Cover_2000x1100\/Ajax-Blog-Cover_2000x1100.jpg?_i=AA","keywords":["Featured","File-upload","SDK"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax","url":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax","name":"AJAX File Upload - Quick Tutorial and Time Saving Tips","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720625\/Web_Assets\/blog\/Ajax-Blog-Cover_2000x1100\/Ajax-Blog-Cover_2000x1100.jpg?_i=AA","datePublished":"2022-06-30T23:21:00+00:00","dateModified":"2025-10-15T19:45:03+00:00","description":"This step-by step guide walks you through the basic ajax file upload process, with examples.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/file_upload_with_ajax"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720625\/Web_Assets\/blog\/Ajax-Blog-Cover_2000x1100\/Ajax-Blog-Cover_2000x1100.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720625\/Web_Assets\/blog\/Ajax-Blog-Cover_2000x1100\/Ajax-Blog-Cover_2000x1100.jpg?_i=AA","width":1540,"height":847,"caption":"Image of computer screen showing Ajax upload file bursting out"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/file_upload_with_ajax#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"AJAX File Upload &#8211; Quick Tutorial and Time Saving Tips"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720625\/Web_Assets\/blog\/Ajax-Blog-Cover_2000x1100\/Ajax-Blog-Cover_2000x1100.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21483"}],"version-history":[{"count":9,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21483\/revisions"}],"predecessor-version":[{"id":38781,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21483\/revisions\/38781"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21484"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}