May 5, 2012

Get all array keys that is not equal to X

Question by Oyvind Andersson

I have several files uploaded with a form that is processed by a PHP script. There are several “categories” that I need to have handles separate ways. In other words, I need some of the files in the $_FILES array to be stored someplace, and some others stored in other places.

So what I need is all files (array keys) that are not $_FILES[‘filename_form’] to be stored / used separably.

The reason why I need this is because the amount of files being uploaded are dynamic, but always either $_FILES[‘filename_type1’] or $_FILES[‘filename_type2_*] where * is a number that increments when more files are input from the form (dynamically)

Might be a very simple solution, either I’m too tired or maybe I’ve been staring too much at the code, but all I know is I need a solution before tomorrow morning, so it’s time sensitive =P

Appreciate all the help I can get.
Thank you!

Answer by Zombaya

$files = array();
$filenames = array();
foreach($_FILES as $name => $fileInfo)
{
    if($name != 'filename_form')
    {
        $files[$name] = $fileInfo;
        $filenames[] = $name;
    }
}

Answer by Starx

Here is an alternate way

$keys = array_keys($thearray);
$filteredArray = array_filter($keys, 'fiterKeys');

function filterKeys($item) {
    if($item != 'valuetocheck') return true;
    else return false;
}
April 30, 2012

how to add jquery-fileupload plugin

Question by ALi

I have used carrierwave and followed the link
But not able make it like demo of jquery-fileupload link

Can anyone guide me where to place the files of js file and images and how to include javascript in html.

if any tutorial or example of Rails, that will be great…
Thanks

Answer by Starx

Different people have different opinion about where it is OK to keep the files. Generally,

  1. Javascript are kept in js or script
  2. Images are kept in img or images or media

Including JS on the HTML is done as this

<script type='text/javascript' src='path/to/jsfile.js'></script>
April 14, 2012

Customizing the appearance of a file input in an HTML form

Question by Danny

I’ve been trying to figure out how to customize the appearance of a file input in an HTML form so that the button will match with the rest of the buttons on my site. Looking around here I found a solution that I would expect to work, but it’s having some strange behavior.

I took my file input and set display:none, and created a new text input and button within the form.

            <form method="post" action="../Entry/Create" enctype="multipart/form-data" onsubmit="return aentryValidate()">
                <input type="text" id="EntryTitle" name="EntryTitle" maxlength="50" />
                <div id="invalidTitle" class="invalidData"></div>
                <p id="char-remaining">(50 characters remaining)</p>

                <input type="file" id="ImageFile" name="ImageFile" style="display:none;" />
                <input type="text" id="ImageFileMask" name="ImageFileMask" disabled="true" />
                <button type="button" onclick="HandleFileButtonClick()" id="ImageFileButton" style="margin-left:10px;padding-bottom:0px;height:20px;width:100px;font-size:14px;">browse...</button>
                <div id="invalidImage" class="invalidData"></div>
                <p id="file-desc">(image to represent your entry, jpg, png, or gif)</p>

                <textarea id="EntryDesc" name="EntryDesc"></textarea>
                <div id="invalidDesc" class="invalidData"></div>
                <br />

                <input type="checkbox" id="isPrivate" name="isPrivate" value="true" />
                <input type="hidden" name="isPrivate" value="false" />
                Make my entry private.

                <button id="new-entry-save">save</button>
            </form>

Then my javascript to handle the ImageFileButton button being clicked:

function HandleFileButtonClick() {
    document.getElementById("ImageFile").click();
    document.getElementById("ImageFileMask").value = document.getElementById("ImageFile").value;
}

It appears to work fine. I click the button, the window pops up for me to select a file. When I select a file, it appears in the text box.

The weird behavior comes when I hit the save button on the form. I noticed that it has to be clicked twice to actually submit for some reason now. And, when it submits it is no longer posting the file.

So I made the file input visible again to see what was happening. If I use the ImageFileButton button to select a file, the file shows up in the file input. But when save is clicked, the file input clears and the form doesn’t submit. You then have to click again to submit, and of course now there is no file.

Anybody know what is happening here?

Answer by Starx

No, its not possible. File inputs are generally browser dependant. You might have to use JavaScript replacement or Flash replacement like uploadify.

Article: Input File

Of all form fields, the file upload field is by far the worst when it comes to styling. Explorer Windows offers some (but not many) style possibilities, Mozilla slightly less, and the other browsers none at all. The “Browse” button, especially, is completely inaccessible to CSS manipulation.

April 9, 2012

how to upload multiple files

Question by bonny

i like to post a number of images on my site.

it works for single post when i just use one image. as i tried to use with multiple images it doesnt work anymore and i dont understand why this doesnt work. to show my code:

if (isset($_POST['var1'];
 ...
 ...        $Bild1 = $_FILES['image1']; 
            $Bild2 = $_FILES['image2'];
            $Bild3 = $_FILES['image3'];
            $Bild4 = $_FILES['image4']; 
            $Bild5 = $_FILES['image5'];
            $Bild6 = $_FILES['image6'];
            $Bild7 = $_FILES['image7'];
            $Bild8 = $_FILES['image8'];
            $Bild9 = $_FILES['image9'];
            $Bild10 = $_FILES['image10'];

                $errors = array();
                $allowed_extension = array('jpg', 'jpeg', 'png', 'bmp', 'tiff', 'gif');

                $file_name_1 = $_FILES['image1']['name'];
                $file_name_2 = $_FILES['image2']['name'];
                $file_name_3 = $_FILES['image3']['name'];
                $file_name_4 = $_FILES['image4']['name'];
                $file_name_5 = $_FILES['image5']['name'];
                $file_name_6 = $_FILES['image6']['name'];
                $file_name_7 = $_FILES['image7']['name'];
                $file_name_8 = $_FILES['image8']['name'];
                $file_name_9 = $_FILES['image9']['name'];
                $file_name_10 = $_FILES['image10']['name'];

                $split_1 = explode('.', $file_name_1);  
                $split_2 = explode('.', $file_name_2);
                $split_3 = explode('.', $file_name_3);
                $split_4 = explode('.', $file_name_4);
                $split_5 = explode('.', $file_name_5);
                $split_6 = explode('.', $file_name_6);
                $split_7 = explode('.', $file_name_7);
                $split_8 = explode('.', $file_name_8);
                $split_9 = explode('.', $file_name_9);
                $split_10 = explode('.', $file_name_10);

                $split_1[0] = '1';
                $split_2[0] = '2';
                $split_3[0] = '3';
                $split_4[0] = '4';
                $split_5[0] = '5';
                $split_6[0] = '6';
                $split_7[0] = '7';
                $split_8[0] = '8';
                $split_9[0] = '9';
                $split_10[0] = '10';

                $file_basename_1 = $split_1[0];
                $file_basename_2 = $split_2[0];
                $file_basename_3 = $split_3[0];
                $file_basename_4 = $split_4[0];
                $file_basename_5 = $split_5[0];
                $file_basename_6 = $split_6[0];
                $file_basename_7 = $split_7[0];
                $file_basename_8 = $split_8[0];
                $file_basename_9 = $split_9[0];
                $file_basename_10 = $split_10[0];

                $file_extension_1 = strtolower(end(explode('.', $file_name_1)));
                $file_extension_2 = strtolower(end(explode('.', $file_name_2)));
                $file_extension_3 = strtolower(end(explode('.', $file_name_3)));
                $file_extension_4 = strtolower(end(explode('.', $file_name_4)));
                $file_extension_5 = strtolower(end(explode('.', $file_name_5)));
                $file_extension_6 = strtolower(end(explode('.', $file_name_6)));
                $file_extension_7 = strtolower(end(explode('.', $file_name_7)));
                $file_extension_8 = strtolower(end(explode('.', $file_name_8)));
                $file_extension_9 = strtolower(end(explode('.', $file_name_9)));
                $file_extension_10 = strtolower(end(explode('.', $file_name_10)));

                $file_size_1 = $_FILES['image1']['size'];
                $file_size_2 = $_FILES['image2']['size'];
                $file_size_3 = $_FILES['image3']['size'];
                $file_size_4 = $_FILES['image4']['size'];
                $file_size_5 = $_FILES['image5']['size'];
                $file_size_6 = $_FILES['image6']['size'];
                $file_size_7 = $_FILES['image7']['size'];
                $file_size_8 = $_FILES['image8']['size'];
                $file_size_9 = $_FILES['image9']['size'];
                $file_size_10 = $_FILES['image10']['size'];

                $file_tmp_1 = $_FILES['image1']['tmp_name'];
                $file_tmp_2 = $_FILES['image2']['tmp_name'];
                $file_tmp_3 = $_FILES['image3']['tmp_name'];
                $file_tmp_4 = $_FILES['image4']['tmp_name'];
                $file_tmp_5 = $_FILES['image5']['tmp_name'];
                $file_tmp_6 = $_FILES['image6']['tmp_name'];
                $file_tmp_7 = $_FILES['image7']['tmp_name'];
                $file_tmp_8 = $_FILES['image8']['tmp_name'];
                $file_tmp_9 = $_FILES['image9']['tmp_name'];
                $file_tmp_10 = $_FILES['image10']['tmp_name'];

                $file_newname_1 = $file_basename_1 .".". $file_extension_1;
                $file_newname_2 = $file_basename_2 .".". $file_extension_2;
                $file_newname_3 = $file_basename_3 .".". $file_extension_3;
                $file_newname_4 = $file_basename_4 .".". $file_extension_4;
                $file_newname_5 = $file_basename_5 .".". $file_extension_5;
                $file_newname_6 = $file_basename_6 .".". $file_extension_6;
                $file_newname_7 = $file_basename_7 .".". $file_extension_7;
                $file_newname_8 = $file_basename_8 .".". $file_extension_8;
                $file_newname_9 = $file_basename_9 .".". $file_extension_9;
                $file_newname_10 = $file_basename_10 .".". $file_extension_10;

                $path ='a/b/c/'.$id.'/'.$new_file_id.'/';

                if (in_array($file_extension_1, $allowed_extension)=== false){
                    $errors[] = 'errormessage1';
                }
                if (in_array($file_extension_2, $allowed_extension)=== false){
                    $errors[] = 'errormessage2';
                }
                if (in_array($file_extension_3, $allowed_extension)=== false){
                    $errors[] = 'errormessage3';
                }
                if (in_array($file_extension_4, $allowed_extension)=== false){
                    $errors[] = 'errormessage4';
                }
                if (in_array($file_extension_5, $allowed_extension)=== false){
                    $errors[] = 'errormessage5';
                }
                if (in_array($file_extension_6, $allowed_extension)=== false){
                    $errors[] = 'errormessage6';
                }
                if (in_array($file_extension_7, $allowed_extension)=== false){
                    $errors[] = 'errormessage7';
                }
                if (in_array($file_extension_8, $allowed_extension)=== false){
                    $errors[] = 'errormessage8';
                }
                if (in_array($file_extension_9, $allowed_extension)=== false){
                    $errors[] = 'errormessage9';
                }
                if (in_array($file_extension_10, $allowed_extension)=== false){
                    $errors[] = 'errormessage10';
                }

                if ($file_size_1 > 2097152){
                    $errors[] = 'errormessage1';
                }
                if ($file_size_2 > 2097152){
                    $errors[] = 'errormessage2';
                }
                if ($file_size_3 > 2097152){
                    $errors[] = 'errormessage3';
                }
                if ($file_size_4 > 2097152){
                    $errors[] = 'errormessage4';
                }
                if ($file_size_5 > 2097152){
                    $errors[] = 'errormessage5';
                }
                if ($file_size_6 > 2097152){
                    $errors[] = 'errormessage6';
                }
                if ($file_size_7 > 2097152){
                    $errors[] = 'errormessage7';
                }
                if ($file_size_8 > 2097152){
                    $errors[] = 'errormessage8';
                }
                if ($file_size_9 > 2097152){
                    $errors[] = 'errormessage9';
                }
                if ($file_size_10 > 2097152){
                    $errors[] = 'errormessage10';
                }

                if (empty($errors)) {

                if (move_uploaded_file($file_tmp_1, $path . $file_newname_1)) {
                    echo 'success1'; 
                }

                if (move_uploaded_file($file_tmp_2, $path . $file_newname_2)) {
                    echo 'success2'; 
                }

                if (move_uploaded_file($file_tmp_3, $path . $file_newname_3)) {
                    echo 'success3'; 
                }

            }

is there also a way to shorten this code? thanks a lot.

Answer by Starx

You are doing it so wrong. To much redundancy in your code

$allowed_extension = array('jpg', 'jpeg', 'png', 'bmp', 'tiff', 'gif');
foreach($_FILES as $file) {
   // Carry on like this
   $file_name = $file['name'];
   $size = $file['size'];

   //However, you might want to extract the extension like this
   $ext = pathinfo($file_name, PATHINFO_EXTENSION);
   //...


}
March 9, 2012

Hide the upload submit button if field "file" is empty

Question by Warface

With this simple example

<form action="" method="post" enctype="multipart/form-data">
            Upload images: <input type="file" name="images[]" multiple="multiple"> <input type="submit" name="submitImgs" value="Upload"/>
        </form>

How can I hide the submit button until somthing’s in the file field, I’ve tried to make a php script that look if the $_FILES[‘error’] == 4 or is_file_uploaded, etc and that don’t work. So I want to simply hide the button until something is selected in the file field.

The answer could be in javascript, jQuery… I don’t care 😀

Thanks

Answer by Rob W

The <input type="file"> element has a files property.

Simply check files.length.

jQuery example, which modifies the submit button on the fly:

// Select the <input type="file"> element
$('input[type=file][name="images[]"]').change(function(){
    var hasNoFiles = this.files.length == 0;
    $(this).closest('form') /* Select the form element */
       .find('input[type=submit]') /* Get the submit button */
       .prop('disabled', hasNoFiles); /* Disable the button. */
});

Answer by Starx

Use this. Attach the code on the change event of the file field.

  $(function() {
     $("input:file").change(function() {
       var fileName = $(this).val();
       if(filename != "") { $("#submitButtonId").show(); } //show the button
     });
  });
February 28, 2012

How to upload a file using a simple jquery-ajax call

Question by Alon

I am searching for a simple client-side script to upload a file using ajax.
Searching for the web for this script only brought up a lot of plugins with multi-features. I don’t need multi-feautres – just to be able to upload it as simple as possible using ajax

Is it possible to write something simple as:

$.get('server/upload.php?file = ' + $('#uploadInput').val(), function(data) {
   $('.result').html(data);    
 });

If it is possible – how should I write it right ($('#uploadInput').val() won’t give me the right directory path – so what do I need to do to pass the location using Ajax).

aside from that – in order to get drag&drop for files – Is there a simple script for that or do I need to use plugin (and is there a really tiny and simple one without multi-features)

Answer by Starx

Uploadify is another great solution for ajax upload. Its

  • extremely easy to setup,
  • very stylish, and
  • cross broswer.

See demos

August 1, 2010

Do you know a jQuery plugin for video file upload?

Question by Morteza M.

I need a jQuery plugin for uploading video files. it should generate some pictures out of movie as it is uploading ( not after the file uploaded ). Do you know such a plugin? if there is no plugin with this feature, can you suggest me some tutorials or articles about doing such a thing?

Answer by Nick Craver

You can’t (as of this answer) do this in JavaScript, it’s forbidden from touching the file like this (for hopefully obvious security reasons). You can find a flash based solution, maybe, but video editing is still a very intensive thing. For thumbnails, you’re best off doing this server-side.

Your comment dismisses this because it’s “time and resource consuming”…trust me, you doing this server-side correctly and returning a few KB in thumbnails is far faster than flash opening and playing with a video to get thumbnails (then uploading those too). Also consider it from a security standpoint, it’s consistent and prevents your uploader from sending fake thumbnails that don’t match the video at all.

Answer by Starx

In My Opinion you cannot find a uploading plugins based on its extension. Like Document uploader, Image uploader, video uploader, game uploader, sql uploader. This is not a genuine question, instead you can a uploader script to upload all these. And what you decide to do, or how you decide to present the uploaded file, its up to you.

Here is a plugin, for all in one purpose

Uploadify

http://www.uploadify.com/

However here are some links which can help

http://blog.amnuts.com/2007/06/22/create-a-random-thumbnail-of-a-video-file/

http://forum.coppermine-gallery.net/index.php?topic=38774.0

http://www.webmasterworld.com/forum88/1371.htm

...

Please fill the form - I will response as fast as I can!