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

2 posts, 0 answers
  1. Francisco
    Francisco avatar
    3 posts
    Member since:
    Jul 2016

    Posted 02 Aug Link to this post

    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.

  2. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 05 Aug Link to this post

    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.
     
Back to Top