nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

ReferenceError: 'formdata' is not defined

esideveloper

Hello,

I have prototyped a file upload form, similar to the example posted in Alfresco wiki (http://wiki.alfresco.com/wiki/Web_Scripts_Examples#File_Upload).

I keep getting this error everytime: ReferenceError: "formdata" is not defined.

Not sure why that is the case. Any ideas??

Find more posts tagged with

Comments

sujaypillai

Make sure your form tag has - enctype="multipart/form-data" as shown below -

<form action="${url.service}" method="post" enctype="multipart/form-data" accept-charset="utf-8">

esideveloper

Thanks for your reply. I have done so, as you said, but the problem still exists. The only difference between my example and the one in the link above is that both the form page and the page to process the file upload have different name, and both are a post, i.e.:

- ProfilePhotoUpload.post.html.ftl: presents that form to the user

- ProfilePhotoUploadDone.post.html.ftl: suppose to upload photo to Alfresco

sujaypillai

ProfilePhotoUpload.post.html.ftl: presents that form to the user

Does that really work for you?

Both verbs "GET" & "POST" explain their significance itself.

When you need to present a form to the user, you should GET it from the server and when the user fills in the data he/she will POST it.

Here are below the files (with different names) that should work for you too:
profilephotoupload.get.desc.xml

<webscript>
&nbsp; <shortname>Profile Photo Upload Form Sample</shortname>
&nbsp; <description>Form for uploading Photo content and meta-data into Repository</description>
&nbsp; <url>/sample/profileupload</url>
&nbsp; <authentication>user</authentication>
</webscript>‍‍‍‍‍‍

profilephotoupload.get.html.ftl

<html>
 <head> 
&nbsp;&nbsp; <title>Upload Web Script Sample</title> 
&nbsp;&nbsp; <link rel="stylesheet" href="${url.context}/css/main.css" TYPE="text/css">
 </head>
 <body>
&nbsp;&nbsp; <table>
&nbsp;&nbsp;&nbsp;&nbsp; <tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td><img src="${url.context}/images/logo/AlfrescoLogo32.png" alt="Alfresco" /></td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td><nobr>Upload Web Script Sample</nobr></td>
&nbsp;&nbsp;&nbsp;&nbsp; </tr>
&nbsp;&nbsp;&nbsp;&nbsp; <tr><td><td>Alfresco ${server.edition} v${server.version}
&nbsp;&nbsp; </table>
&nbsp;&nbsp; <p>
&nbsp;&nbsp; <table>
&nbsp;&nbsp;&nbsp;&nbsp; <form action="${url.service}" method="post" enctype="multipart/form-data" accept-charset="utf-8">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tr><td>File:</td><td><input type="file" name="file"></td></tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tr><td>Title:</td><td><input name="title"></td></tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tr><td>Description:</td><td><input name="desc"></td></tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tr><td></td></tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tr><td><input type="submit" name="submit" value="Upload"></td></tr>
&nbsp;&nbsp;&nbsp;&nbsp; </form>
&nbsp;&nbsp; </table>
 </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

profilephotouploaddone.post.desc.xml

<webscript>
&nbsp; <shortname>File Upload Sample</shortname>
&nbsp; <description>Upload file content and meta-data into Repository</description>
&nbsp; <url>/sample/profileupload</url>
&nbsp; <authentication>user</authentication>
</webscript>
‍‍‍‍‍‍‍‍

profilephotouploaddone.post.html.ftl

<html>
 <head> 
&nbsp;&nbsp; <title>Upload Web Script Sample</title> 
&nbsp;&nbsp; <link rel="stylesheet" href="${url.context}/css/main.css" TYPE="text/css">
 </head>
 <body>
&nbsp;&nbsp; <table>
&nbsp;&nbsp;&nbsp;&nbsp; <tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td><img src="${url.context}/images/logo/AlfrescoLogo32.png" alt="Alfresco" /></td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td><nobr>Upload Web Script Sample</nobr></td>
&nbsp;&nbsp;&nbsp;&nbsp; </tr>
&nbsp;&nbsp;&nbsp;&nbsp; <tr><td>Alfresco ${server.edition} v${server.version}</td></tr>
&nbsp;&nbsp;&nbsp;&nbsp; <tr><td></td></tr>
&nbsp;&nbsp;&nbsp;&nbsp; <tr><td>Uploaded <a href="${url.serviceContext}/sample/folder${upload.displayPath}">${upload.name}</a> of size ${upload.properties.content.size}.</td></tr>
&nbsp;&nbsp; </table>
 </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

profilephotouploaddone.post.js

var filename = null;
var content = null;
var title = "";
var description = "";

// locate file attributes
for each (field in formdata.fields)
{
&nbsp; if (field.name == "title")
&nbsp; {
&nbsp;&nbsp;&nbsp; title = field.value;
&nbsp; }
&nbsp; else if (field.name == "desc")
&nbsp; {
&nbsp;&nbsp;&nbsp; description = field.value;
&nbsp; }
&nbsp; else if (field.name == "file" && field.isFile)
&nbsp; {
&nbsp;&nbsp;&nbsp; filename = field.filename;
&nbsp;&nbsp;&nbsp; content = field.content;
&nbsp; }
}

// ensure mandatory file attributes have been located
if (filename == undefined || content == undefined)
{
&nbsp; status.code = 400;
&nbsp; status.message = "Uploaded file cannot be located in request";
&nbsp; status.redirect = true;
}
else
{
&nbsp; // create document in company home for uploaded file
&nbsp; upload = companyhome.createFile("upload" + companyhome.children.length + "_" + filename) ;
&nbsp; 
&nbsp; upload.properties.content.write(content);
&nbsp; upload.properties.content.setEncoding("UTF-8");
&nbsp; upload.properties.content.guessMimetype(filename);
&nbsp; 
&nbsp; upload.properties.title = title;
&nbsp; upload.properties.description = description;
&nbsp; upload.save();
 
&nbsp; // setup model for response template
&nbsp; model.upload = upload;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The other point to be noted is that both the webscript have same <url> in description and for the same reason your form uses -
<form action="${url.service}" method="post" enctype="multipart/form-data" accept-charset="utf-8">

Say that you had a <url> set for second webscript [profilephotouploaddone] as - /sample/profileuploaddone then your form tag should be -
<form action="${url.serviceContext}/sample/profileuploaddone" method="post" enctype="multipart/form-data" accept-charset="utf-8">

Hope so that helps you

Thanks.

esideveloper

Thanks for your reply. What you explained made sense. To shed some more light into my situation is that we have a middle-man (Web Quick Start) acting as a proxy between the end-user and Alfresco.

To reiterate, the following works for file upload (through quick start):

- ProfilePhotoUpload.get.html.ftl for presenting the form
- ProfilePhotoUpload.post.js for uploading the file

Both have the same URI. But now, we set up Alfresco to only process POST requests (won't handle GET requests because the GET's we execute are too large today for a GET request). That is why we had to resort to the implementation above, which is proving to be problematic. So:

- ProfilePhotoUpload.post.html.ftl DOES present the form to end-user
- ProfilePhotoUploadDone.post.js throws the error ReferenceError: "formdata" is not defined

Thanks again for all your input, cheers