How to indent a new file name in an automatic "Drag and Drop" upload

Question

How to indent a new file name in an automatic "Drag and Drop" upload

Asked 8 years, 1 month ago

Viewed 128 times

0

I found a system of upload imaging Drag and Drop on the internet that makes the upload of the image in a specific folder and renames the file with a random name without having to submit the form.

However I cannot recover the new file name to write to the database?

Project link

https://github.com/CreativeDream/php-uploader

I simplified the code:

<!DOCTYPE>
<html lang="html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Example 1 - jQuery Filer 1.3 - CreativeDream</title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

    <!-- Styles -->
    <link href="../../css/jquery.filer.css" rel="stylesheet">
    <link href="../../css/themes/jquery.filer-dragdropbox-theme.css" rel="stylesheet">

    <!-- Jvascript -->
    <script src="http://code.jquery.com/jquery-3.1.0.min.js" crossorigin="anonymous"></script>
    <script src="../../js/jquery.filer.min.js" type="text/javascript">      </script>
    <script src="./js/custom.js" type="text/javascript"></script>

</head>

<body>
<div>

    <form name="form" action="" method="post">

        <div id="content">

            <!-- Example 2 -->
            <input type="file" name="files[]" id="filer_input2" multiple="multiple">
            <!-- end of Example 2 -->

            <input class="button" type="submit" name="publicar" value="Publicar"/>

        </div>
    </form>

    </div>
</body>

if( isset( $_POST['publicar'] ) ) {
    $img = $_POST['files']
}

https://github.com/CreativeDream/php-uploader/blob/master/src/class.uploader.php look at the ready code ai!!! just like in the example! got it! got it?

– novic

2016/10/07 at 00:56

1 answer

Browser other questions tagged php javascript mysql file-upload

You are not signed in. Login or sign up in order to post.

by novic • **35,673** points · Answer 1 · 2016-10-06T20:14:22+00:00

If you send multiple files or only one there is one array that informs the generated names that have the chave name:

Specific location in the example code:

if($data['isComplete']){
    $files = $data['data'];
    foreach($files['metas'] as $values)
    {
        //aqui são os nomes gerados  
        echo $values['name'];
    }
}

that is to say, $values['name'] use to write to your database.

Besides the name of the generated file has several information:

Array
(
    [files] => Array
        (
            [0] => uploads/Lh3EGOrl7D.jpg
            [1] => uploads/nJVhvxBXQD.jpg
            [2] => uploads/0kJOf_ABQt.jpg
            [3] => uploads/lH9ZrpGAbM.jpg
        )

    [metas] => Array
        (
            [0] => Array
                (
                    [date] => Thu, 06 Oct 2016 17:15:00 -0300
                    [extension] => jpg
                    [file] => uploads/Lh3EGOrl7D.jpg
                    [name] => Lh3EGOrl7D.jpg
                    [old_name] => 14064104_10209380587605927_5793335061447087469_n.jpg
                    [replaced] => 
                    [size] => 8251
                    [size2] => 8.06 KB
                    [type] => Array
                        (
                            [0] => image
                            [1] => jpeg
                        )

                )

            [1] => Array
                (
                    [date] => Thu, 06 Oct 2016 17:15:00 -0300
                    [extension] => jpg
                    [file] => uploads/nJVhvxBXQD.jpg
                    [name] => nJVhvxBXQD.jpg
                    [old_name] => 14192672_1402374739778600_7123746786432954771_n.jpg
                    [replaced] => 
                    [size] => 14404
                    [size2] => 14.07 KB
                    [type] => Array
                        (
                            [0] => image
                            [1] => jpeg
                        )

                )

such as extension, old file name, size, upload date, etc. These key values can be used in foreach if you like.

Complete Code:

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <link href="css/jquery.filer.css" type="text/css" rel="stylesheet" />
    <link href="css/themes/jquery.filer-dragdropbox-theme.css" type="text/css" rel="stylesheet" />
    <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="js/jquery.filer.min.js"></script>
</head>
<body>
<br>
<br>
<br>
<div class="flex-center position-ref full-height">
    <div class="content">
        <form action="upSave.php" method="post" enctype="multipart/form-data">
            <input type="file" name="files[]" id="filer_input" multiple="multiple">
            <input type="submit" value="Enviar">
        </form>
    </div>
</div>
    <script>
        $(document).ready(function() {
            $('#filer_input').filer();
        });
    </script>
</body>
</html>

PHP

<?php

    require_once("class.uploader.php");

    $uploader = new Uploader();
    $data = $uploader->upload($_FILES['files'], array(
        'limit' => 10, //Maximum Limit of files. {null, Number}
        'maxSize' => 10, //Maximum Size of files {null, Number(in MB's)}
        'extensions' => null, //Whitelist for file extension. {null, Array(ex: array('jpg', 'png'))}
        'required' => false, //Minimum one file is required for upload {Boolean}
        'uploadDir' => 'uploads/', //Upload directory {String}
        'title' => array('auto', 10), //New file name {null, String, Array} *please read documentation in README.md
        'removeFiles' => true, //Enable file exclusion {Boolean(extra for jQuery.filer), String($_POST field name containing json data with file names)}
        'replace' => false, //Replace the file if it already exists {Boolean}
        'perms' => null, //Uploaded file permisions {null, Number}
        'onCheck' => null, //A callback function name to be called by checking a file for errors (must return an array) | ($file) | Callback
        'onError' => null, //A callback function name to be called if an error occured (must return an array) | ($errors, $file) | Callback
        'onSuccess' => null, //A callback function name to be called if all files were successfully uploaded | ($files, $metas) | Callback
        'onUpload' => null, //A callback function name to be called if all files were successfully uploaded (must return an array) | ($file) | Callback
        'onComplete' => null, //A callback function name to be called when upload is complete | ($file) | Callback
        'onRemove' => 'onFilesRemoveCallback' //A callback function name to be called by removing files (must return an array) | ($removed_files) | Callback
    ));

    if($data['isComplete']){
        $files = $data['data'];
        //print_r($files);
        foreach($files['metas'] as $values)
        {
            echo $values['name'];
            echo '<br />';
        }
    }

    if($data['hasErrors']){
        $errors = $data['errors'];
        print_r($errors);
    }