How to upload an html form containing a pdf file from an extension written in JavaScript to a URL?

[RJ9191]

I need to send a form from an Adobe Illustrator extension to a URL.

Previously we were using C++ to write the plugin with same functionality for InDesign.

To implement it as an extension for Photoshop and Illustrator we used HTML5 for UI, JQuery, AngularJS to implement functionalities of the extension.

Now I need to send a PDF to a URL in a form of HTML FORM.

We were using cURL for C++ for this purpose. What can we use with JS to do the same here?

I tried to use Ajax but it turned out that you cannot make a cross-domain call with it, and my extension doesn't have a domain name or IP or anything. Its just an extension running with Photoshop and Illustrator and we need to upload a form (containing a PDF) to a URL.

How can I do it?

Any help will be appreciated. I have added the C++ code for this function below.

	bool WPConnection::UploadPDFToServer( const char* pdfPath, const char* urlInfo )
	{

    bool16 uploadStatus = false;

    try // Abhishek

    {

	// Get the URL
	char connectionURL[256] = {0};

	// Now update the project panel tree
	const char* userName = g_WPDetailsVector.at(0).c_str();
	const char* passWord = g_WPDetailsVector.at(1).c_str();
	const char* projectID = g_WPDetailsVector.at(2).c_str();
	const char* statusID = g_WPDetailsVector.at(3).c_str();
	const char* pageNumber = g_WPDetailsVector.at(4).c_str();

	strcpy(connectionURL, urlInfo);
	strcat(connectionURL, "/indd_filetransfer.asp?");
	strcat(connectionURL, "username=");
	strcat(connectionURL, userName);
	strcat(connectionURL, "&password=");
	strcat(connectionURL, passWord);
	strcat(connectionURL, "&project_id=");
	strcat(connectionURL, projectID);
	strcat(connectionURL, "&status_id=");
	strcat(connectionURL, statusID);
	strcat(connectionURL, "&item_numbers=");
	strcat(connectionURL, pageNumber);

	CURLcode result = CURLE_FAILED_INIT;
	struct curl_httppost *formpost=NULL;
	struct curl_httppost *lastptr=NULL;
	curl_formadd(&formpost,
				&lastptr,
				CURLFORM_COPYNAME, "file",
				CURLFORM_FILE, pdfPath,
				CURLFORM_CONTENTTYPE, "pdf",
				CURLFORM_END);

	if(fCurl)
	{
	// Clearing all the connection info
		this->ClearConnectionInfo();
	//set options for a curl easy handle
		curl_easy_setopt(fCurl, CURLOPT_URL, connectionURL);
		curl_easy_setopt(fCurl, CURLOPT_HTTPPOST, formpost);
		result = curl_easy_setopt (fCurl, CURLOPT_NOPROGRESS, FALSE);
		result = curl_easy_setopt (fCurl, CURLOPT_PROGRESSFUNCTION, progress_callback);
		//Don't verify the peer.
		curl_easy_setopt(fCurl, CURLOPT_SSL_VERIFYPEER, FALSE);
	//Use proxy information
		if( g_UseProxy == kTrue )
		{
			curl_easy_setopt( fCurl, CURLOPT_PROXY, g_WPDetailsVector.at(5).c_str() );
			if( g_ProxyAuthentication == kTrue )
			{
				curl_easy_setopt( fCurl, CURLOPT_PROXYUSERPWD, g_WPDetailsVector.at(6).c_str() );
			}
		}

		result = curl_easy_perform(fCurl);
		this->GetConnectionInfo(fCurl);

		curl_formfree(formpost);
	}

	if( (result == CURLE_OK) && (fHttpStatus == 200) /*&& (fResponseStatus == -1)*/)
	{
		g_UploadPercent = 100;
		uploadStatus = true;
	}
	else
	{
		g_UploadError = true;
	}

    }

    catch(...)

    {

g_UploadError = true;

    }

    return uploadStatus;

}

[LeoTaro]

Can't you just use a standard html form with your upload page as the action?

<form method="POST" enctype="multipart/form-data" action="http://www.mysite.com/upload.php">

<input name="pdf_file" type="file" />

<input type="submit" />

</form>

[RJ9191]

Thanks for response. Yes I tried it and it worked just fine. But my requirement is not to browse and manually upload. I want to user to save Illustrator file and click upload and want my code to grab the path of the save document and put it in a FORM and HTTP POST it to the URL

As this tutorial Adobe CEP APIs | Adobe Developer Connection has mentioned I tried using CURL process but I didn't work.

[LeoTaro]

For security reasons, using just standard html/html5 and Javascript, you can only upload files selected by the user otherwise you could write web pages that could upload arbitrary files from a user's machine without them knowing.

The file I/O CEP extensions on the link you gave mentions a readFile function (did you mean CEP when you said CURL?). Did you try using this?

[RJ9191]

LeoTaro wrote:

For security reasons, using just standard html/html5 and Javascript, you can only upload files selected by the user otherwise you could write web pages that could upload arbitrary files from a user's machine without them knowing.

The file I/O CEP extensions on the link you gave mentions a readFile function (did you mean CEP when you said CURL?). Did you try using this?

No, the tutorial has mentioned that with adobe CEP APIs we can create a process like

var result = window.cep.process.createProcess(“/bin/ls”);

So I tried creating curl process (/usr/bin/curl) cURL - How To Use to send the form to the server like $curl -F filedata=data url from command line. But it didn't work it should have according to the tutorial.

[LeoTaro]

I think you should try and do it within Illustrator rather than calling external programs (do you want your plugin to run on Windows as well?).

According to the doc for the readFile function, you should can pass a second argument that specifies the format of the file contents, but it always seemed to read it as binary for me. The utility functions like binary_to_b64 also don't seem to exist (I tried binary_to_b64, window.cep.binary_to_b64 and window.cep.fs.binary_to_b64).

Anyway using the code below I could get it to post the file contents as a base64 string to an upload page (b64EncodeUnicode from Base64 encoding and decoding - Web APIs | MDN):

function b64EncodeUnicode(str) {

    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {

        return String.fromCharCode('0x' + p1);

    }));

}

function uploadFile(url, path) {

  var formData = new FormData();

  var file = window.cep.fs.readFile(path);

  var b64 = b64EncodeUnicode(file.data);

  formData.append('file_contents', b64);

  var xhr = new XMLHttpRequest();

  xhr.open('POST', url, true);

  xhr.send(formData);

}

[RJ9191]

Server respond with bad request 500, the server will only accept the file not the data. In formData we must have file not file.data.

[LeoTaro]

You have  a few choices:

1. Change your server code so that it can accept the file contents.

2. Find some way of submitting the data as a File object.

3. Work out how to send the data using external program like curl.

[LeoTaro]

4. Why don't you just create a hybrid extension using html/javascript for the GUI and use your C++ code in the plugin part?

[hemantk12546598 · Accepted solution]

try this

var arg = 'file=@path_to_file';

var url ="your_server_url ";

window.cep.process.createProcess('/usr/bin/curl','--form',arg,url);