Change file's name when it's uploaded via html form

1 Answer 14724 Views
JavaScript SDK
This question is locked. New answers and comments are not allowed.
Francisco
Top achievements
Rank 1
Francisco asked on 02 Aug 2016, 08:04 PM

Hi everyone!

Is there any way to change the filename when it's uploaded via html form?

I understand that I need a form like this:

<form id="upload_form" method="post" enctype="multipart/form-data">
    <input type="file" name="upload_file">
    <input type="submit">
  </form>

And in my Javascript this:

$('#upload_form').attr('action', everlive.files.getUploadUrl());

 

Then, the file will be uploaded with its original name... but I want to add some characters at the end of the filename... is there any way to change the name when I upload files by this way?

Thank you and sorry for my english.

1 Answer, 1 is accepted

Sort by
0
Anton Dobrev
Telerik team
answered on 05 Aug 2016, 03:20 PM
Hi Francisco,

Based on your code I am assuming that you would like to use the HTML/web approach with a form input.

This can be done with constructing a FormData and changing the name of the file there. Here is an example of how to do this:

<body>
 
    <form id="form1" enctype="multipart/form-data">
        <input id="image-file" type="file" name="file1" />
        <input id="btn-submit" type="submit" value="submit" />
    </form>
</body>
<script>
    $(document).ready(function() {
 
        initImageUpload();
 
        function initImageUpload() {
            $("#btn-submit").click(function(e) {
                e.preventDefault();
 
                var everlive = new Everlive({
                    appId: "",
                    scheme: "https"
                });
 
                // construct the form data and apply new file name
                var file = $('#image-file').get(0).files[0];
 
                var newFileName = file.filename + "new";
                var formData = new FormData();
                formData.append('file', file, newFileName);
 
 
                $.ajax({
                    url: everlive.files.getUploadUrl(), // get the upload URL for the server
                    success: function(fileData) {
                        alert('Created file with Id: ' + fileData.Result[0].Id); // access the result of the file upload for the created file
                        alert('The created file Uri is available at URL: ' + fileData.Result[0].Uri);
                    },
                    error: function(e) {
                        alert('error ' + e.message);
                    },
                    // Form data
                    data: formData,
                    type: 'POST',
                    cache: false,
                    contentType: false,
                    processData: false
                });
                return false;
            });
        }
    });
</script>

Let me know if this answers your question.

Regards,
Anton Dobrev
Telerik by Progress
 
Everlive is now Telerik Backend Services, and is part of the Telerik Platform.
 
Tags
JavaScript SDK
Asked by
Francisco
Top achievements
Rank 1
Answers by
Anton Dobrev
Telerik team
Share this question
or