Armitage2k
Armitage2k

Reputation: 1264

bootstrap-fileinput - delete attachment and multiple upload fields

I am having two issues with the Bootstrap FileInput plugin:

  1. I am uploading to a "temp" folder to park the files until the form is submitted and I get a unique key to which I can relate the attachment and form data. The problem now is that in case the user wants to delete an uploaded file via the native "trash" icon, the uploaded file remains in the "temp" folder as the delete function is not defined. How can I set-up the "delete attachment" button and point it to attachment in the "temp" folder?

  2. I have one webpage with 2 tabs, each tab holding a form for the user to fill out. I need each form to display the fileinput plugin, but after duplicating the code (even though the input fields have different names), only the first fileinput field works properly, the second does not upload files at all. How can I have multiple instances of the plugin running on one webpage?

Input field + JS:

<h4>Attachments</h4>
<div class="col-md-12">

    <input tabindex="19" id="input" name="input[]" type="file" multiple class="file-loading">
    <p class="help-block">Max. filesize 5MB, images only (.jpg || .png || .bmp)</p>
    <script>
    var $input = $("#input");
    $input.fileinput({
        uploadUrl: "./attachments/upload.php", // server upload action
        uploadExtraData: {log:'auto',holidex:'<?php echo $_SESSION['Holidex']; ?>',user:'<?php echo $_SESSION['myusername']; ?>'},
        uploadAsync: false,
        showUpload: false, // hide upload button
        showRemove: false, // hide remove button
        maxFileCount: 10,
        'maxFileSize': 5120,
        allowedFileTypes: ["image", "video"]
    }).on("filebatchselected", function(event, files) {
        // trigger upload method immediately after files are selected
        $input.fileinput("upload");
    });
    </script>

</div>

upload.php

<?php
session_start();

if(isset($_FILES['input'])) {

    // define variables
    $holidex = $_POST['holidex'];
    $user = $_POST['user'];
    $output_dir = "./".$holidex."/temp/".$user."/";

    // check whether temporary folder exists, otherwise create
    if (!file_exists($output_dir)) {
        mkdir($output_dir, 0755, true);
    }

    $ret = array();

//  This is for custom errors;  
/*  $custom_error= array();
    $custom_error['jquery-upload-file-error']="File already exists";
    echo json_encode($custom_error);
    die();
*/
    $error = $_FILES["input"]["error"];
    //You need to handle  both cases
    //If Any browser does not support serializing of multiple files using FormData() 
    if(!is_array($_FILES["input"]["name"])) //single file
    {
        $fileName = $_FILES["input"]["name"];
        move_uploaded_file($_FILES["input"]["tmp_name"],$output_dir.$fileName);
        $ret[]= $fileName;
    }
    else  //Multiple files, file[]
    {
      $fileCount = count($_FILES["input"]["name"]);
      for($i=0; $i < $fileCount; $i++)
      {
        $fileName = $_FILES["input"]["name"][$i];
        move_uploaded_file($_FILES["input"]["tmp_name"][$i],$output_dir.$fileName);
        $ret[]= $fileName;
      }

    }
    echo json_encode($ret);

} else { echo "No data received."; }
 ?>

Upvotes: 1

Views: 1509

Answers (0)

Related Questions