How to add custom "File Name" to an image/file being uploaded?

[Alena Prykhodko]

It's not supported in builder. We need to consult developers whether such functionality is planned.

[xman]

Any updates? One of my features is still stuck due to this.

I have another question, is there a single file upload helper function like:
uploadMultipleFilesHelper ??

-

[Yurii Orishchuk]

Hi xman,

Here is solution for your to change uploaded file name.

1 Create new JS asset.

2 Open this JS asset and populate it with following code:

pre

function uploadMultipleFilesHelperWithCustomName(datasource, fileList) {
var isCorrectService = false;
if (datasource) {
if (datasource.service && datasource.service.requestOptions) {
var options = datasource.service.requestOptions;
isCorrectService = options.type === 'post' && options.contentType === false && /^.*\/files$/i.test(options.url);
}
}
if (isCorrectService) {
if (fileList) {
var data = new FormData();
for (var i = 0; i < fileList&#46;length; i++) {
appendItem(data, fileList);
}
try {
datasource&#46;execute({
'allowDataModification': false,
'processData': false,
'data': data
});
} catch (exception) {
console&#46;log(exception&#46;name + ' ' + exception&#46;message);
hideSpinner();
}
}
} else {
console&#46;warn('This data source not be supported in the method of upload multiple files');
}

Code: Select all

 function appendItem(formData, item) { 
     if (item) { 
         if (item.type === 'file') { 
             item = item.files; 
         } 
         if (item instanceof FileList) { 
             for (var i = 0; i < item&#46;length; i++) { 
                 appendItem(formData, item[i]); 
             } 
             return; 
         } 
         var name; 
         if (item&#46;name) { 
             &#47;&#47;Note: here you can change file name in accordance to your needs&#46; 
             name = "customPart_" + item&#46;name; 
         } 
         formData&#46;append(name, item); 
     } 
 } 

}

/pre

3 Take a look and change in accordance to your needs following code: http://prntscr.com/4f5nrk/direct

pre

name = "customPart_" + item&#46;name;

/pre

4 On upload button "click" you need use following code: http://prntscr.com/4f5ne8/direct

pre

uploadMultipleFilesHelperWithCustomName(uploadService, Apperyio('file_input'));

/pre

That's all. After you will get this result: http://prntscr.com/4f5o7d/direct

Regards.

[xman]

Great, step-1 is done - this works.

For step-2, I need to display an image thus uploaded into a picture element's asset. File pre-defined collection has a "read" service - will it return the picture to display on query? How do I go about that?

[Yurii Orishchuk]

xman,

Nope, this "read" service returns item(entity) from "Files" system collection.

To set asset to image component you need to:

1. Open(upload file service) datasource mapping.

2. Link "fileurl" response property to image component "asset" property: http://prntscr.com/4f7kzy/direct

   That's all.

   Regards.

[xman]

When I look at the response tab in my File upload service, I don't see fileurl or filename response parameters. I only have "File Name".

I manually added the "fileurl" in there and mapped as you suggested but that did not do anything.

[xman]

...and when I printed the response url out using an alert, it says "undefined"

[Yurii Orishchuk]

Dear xman,

You need to add correct response parameter to your "upload files" service.

So follow these steps below:

1 Open your "upload file" service. http://prntscr.com/4f8174/direct

2 Open "Response" tab and click on "Automatic create from sample response".

3 Put here following JSON response: http://prntscr.com/4f80mq/direct

pre

[{"success":{"filename":"d0381733-4e1f-41ba-8a05-b75202988d79&#46;customPart_201&#46;jpeg","fileurl":"https:&#47;&#47;api&#46;appery&#46;io/rest/1/db/files/52fd3d06e4b0a25c11c89917/d0381733-4e1f-41ba-8a05-b75202988d79&#46;customPart_201&#46;jpeg"}}]

/pre

4 Now in "response" tab you should see following response parameters: http://prntscr.com/4f7zzr/direct

That's all.

Note: In this way you can add any response parameters for any service from real server response. See details where you can get this sample: http://prntscr.com/4f81jj/direct

Regards.

[xman]

Nice! ...thanks Yurii ..the pic displays now.

[xman]

One last question (hopefully ) ...so the picture displays fine on the page where I'm mapping to the picture elements asset and also uploading. I have another picture element on other page which needs to display this same image.

So what I do is the following:

Appery("picElementName").attr("src",Appery.getImagePath("picName"));

However, a small thumbnail of this type starts showing up instead of the picture.
http://awesomescreenshot.com/08e3ctg141

When I right click on it and copy the "image url" I see that the URL is indeed pointing to the image I want to be displayed in this picture element. Not sure why it's not displaying properly?