Yii 1.1: eajaxupload

EAjaxUpload: Uploading files using ajax (without flash)
98 followers

Check new extension EFineUploader http://www.yiiframework.com/extension/efineuploader/


Uploading files using ajax (without flash).
Based on http://valums.com/ajax-upload/

Installation

  • Extract the release file under protected/extensions

Requirements

  • Yii 1.1 or above

Usage

view:

<? $this->widget('ext.EAjaxUpload.EAjaxUpload',
array(
        'id'=>'uploadFile',
        'config'=>array(
               'action'=>Yii::app()->createUrl('controller/upload'),
               'allowedExtensions'=>array("jpg"),//array("jpg","jpeg","gif","exe","mov" and etc...
               'sizeLimit'=>10*1024*1024,// maximum file size in bytes
               'minSizeLimit'=>10*1024*1024,// minimum file size in bytes
               //'onComplete'=>"js:function(id, fileName, responseJSON){ alert(fileName); }",
               //'messages'=>array(
               //                  'typeError'=>"{file} has invalid extension. Only {extensions} are allowed.",
               //                  'sizeError'=>"{file} is too large, maximum file size is {sizeLimit}.",
               //                  'minSizeError'=>"{file} is too small, minimum file size is {minSizeLimit}.",
               //                  'emptyError'=>"{file} is empty, please select files again without it.",
               //                  'onLeave'=>"The files are being uploaded, if you leave now the upload will be cancelled."
               //                 ),
               //'showMessage'=>"js:function(message){ alert(message); }"
              )
)); ?>

controller:

public function actionUpload()
{
        Yii::import("ext.EAjaxUpload.qqFileUploader");
 
        $folder='upload/';// folder for uploaded files
        $allowedExtensions = array("jpg");//array("jpg","jpeg","gif","exe","mov" and etc...
        $sizeLimit = 10 * 1024 * 1024;// maximum file size in bytes
        $uploader = new qqFileUploader($allowedExtensions, $sizeLimit);
        $result = $uploader->handleUpload($folder);
        $return = htmlspecialchars(json_encode($result), ENT_NOQUOTES);
 
        $fileSize=filesize($folder.$result['filename']);//GETTING FILE SIZE
        $fileName=$result['filename'];//GETTING FILE NAME
 
        echo $return;// it's array
}

Resources

Total 20 comments

#16815 report it
amanchandel at 2014/03/31 07:42am
upload image

help in display image .good work

#16814 report it
amanchandel at 2014/03/31 07:41am
image upload

can u tell me how to show image in view form

#14500 report it
aliabdzad at 2013/08/18 09:12am
a problem

hi all ... i've a problem with this ext that it always give me 'failed' after submiting

i want too add images to this directori : D:\software\xampp\htdocs\yii\demos\image\upload

this is my action in PostController:

public function actionUpload()
{
        Yii::import("ext.EAjaxUpload.qqFileUploader");
        $folder=Yii::app()->request->baseUrl . "/upload/";// folder for uploaded files
        $allowedExtensions = array("jpg","png","pdf");//array("jpg","jpeg","gif","exe","mov" and etc...
        $sizeLimit = 1 * 1024 * 1024;// maximum file size in bytes
        $uploader = new qqFileUploader($allowedExtensions, $sizeLimit);
        $result = $uploader->handleUpload($folder);
 
        $fileSize=filesize($folder.$result['filename']);//GETTING FILE SIZE
        $fileName=$result['filename'];//GETTING FILE NAME
        $result=htmlspecialchars(json_encode($result), ENT_NOQUOTES);
 
        echo $result;// it's array
        echo 'ok';
}

and this is my view code :

<?php
 $this->widget('ext.EAjaxUpload.EAjaxUpload',
array(
        'id'=>'uploadFile',
        'config'=>array(
               'action'=>Yii::app()->getBaseUrl().'/upload',
               'allowedExtensions'=>array("jpg"),//array("jpg","jpeg","gif","exe","mov" and etc...
               'sizeLimit'=>10*1024*1024,// maximum file size in bytes
               //'minSizeLimit'=>10*1024*1024,// minimum file size in bytes
               //'onComplete'=>"js:function(id, fileName, responseJSON){ alert(fileName); }",
               //'messages'=>array(
               //                  'typeError'=>"{file} has invalid extension. Only {extensions} are allowed.",
               //                  'sizeError'=>"{file} is too large, maximum file size is {sizeLimit}.",
               //                  'minSizeError'=>"{file} is too small, minimum file size is {minSizeLimit}.",
               //                  'emptyError'=>"{file} is empty, please select files again without it.",
               //                  'onLeave'=>"The files are being uploaded, if you leave now the upload will be cancelled."
               //                 ),
               //'showMessage'=>"js:function(message){ alert(message); }"
              )
)); ?>

tanx in advance and sorry for this amature question ....

#13948 report it
vinoth.mohan at 2013/07/09 05:04am
The reason y shows failed.

Use this code,

public function actionUpload()
{
        Yii::import("ext.EAjaxUpload.qqFileUploader");
        $folder=Yii::app() -> getBasePath() . "/../images/uploads/";// folder for uploaded files
        $allowedExtensions = array("jpg","png","pdf");//array("jpg","jpeg","gif","exe","mov" and etc...
        $sizeLimit = 1 * 1024 * 1024;// maximum file size in bytes
        $uploader = new qqFileUploader($allowedExtensions, $sizeLimit);
        $result = $uploader->handleUpload($folder);
 
        $fileSize=filesize($folder.$result['filename']);//GETTING FILE SIZE
        $fileName=$result['filename'];//GETTING FILE NAME
        $result=htmlspecialchars(json_encode($result), ENT_NOQUOTES);
 
        echo $result;// it's array
}

this code should be added after getting file name: $result=htmlspecialchars(json_encode($result), ENT_NOQUOTES);

#13731 report it
paskuale at 2013/06/20 07:37am
foreach multi instance

Can I put widget in foreach() loop ? thanks

#12957 report it
Fragoulas at 2013/04/23 09:27am
For large files >40mb

If you cannot upload large files larger that 35mb-40mb, according to this, you have to set the content type of the request header to "multipart/form-data" instead of "application/octet-stream".

File to change: assets/fileuploader.js(1355)

xhr.setRequestHeader("Content-Type", "multipart/form-data");
//xhr.setRequestHeader("Content-Type", "application/octet-stream");
#12956 report it
Trejder at 2013/04/23 08:04am
Differences between EAjaxUploader and EFineUploader

Can you explain, in brief, here or there, what is key difference between EAjaxUploader and EFineUploader? Is the only difference, a different library behind? Or maybe new EFineUploader offers some features that EAjaxUploader lacks?

#12954 report it
kosenka at 2013/04/23 07:13am
check new extension EFineUploader

@All - check new extension EFineUploader http://www.yiiframework.com/extension/efineuploader/

#12953 report it
Konstantinos Filios at 2013/04/23 06:00am
Chuking for large file uploads

@Trejder I think the misunderstanding comes from the fact that this extension does not mention which version of the original plugin it wraps. Tinky probably saw the original plugin's docs/website and noticed that it supports chunking for large file uploads (up to 4GB). But this is for the latest version of the plugin.

I took a look around and noticed that the PHP server-side handler for the latest version of the plugin has been modified to support resume, chunking, etc., and can be found here:

https://github.com/mrCartmenez/file-uploader/tree/master/server

Of course this boils down to whether this Yii extension claims to support the latest version of the plugin or not. And in our case, it doesn't, so the truth is somewhere in the middle.

I have already created a fork of this extension on github, but never tested the big file uploads, since they seem to be supported by only late versions of browsers, as you can see here http://blog.fineuploader.com/2012/12/file-chunkingpartitioning-is-now.html

It looks like the updated php code has completely removed the XHR method and only supports chunking. I hope the above pointers will help you do your thing for now if you're not in a hurry. Otherwise I'll try to update the extension fork to see what can be supported and how, of course announcing details here so the extension author himself can have a look.

#12948 report it
Trejder at 2013/04/22 06:15pm
@tiky

If I'm not mistaken, this is only a wrapper (Yii extension) for Ajax Upload plugin. So, you should address all questions concerning performance and filesize limits to authors of original plugin, not to the author of Yii extension.

You should also check your server (or hosting) settings and limitations. This plugin most likely uses HTTP protocol, so PHP's and Apache (server) limits / settings apply. I'm also not sure, if 256 MB of server RAM memory will be enough to handle 1-2 GB file transfers? This sounds like possible server kill.

#12943 report it
tiky at 2013/04/22 01:05pm
upload big files

Hy i want to upload big files like 1gb or 2gb movie files. But it seems that it's using a lot memory to copy that file. Is there a way to do this without using so much memory. my memory limit is at memory_limit = 256M but i can upload maximum 50mb/60mb files.

thanks

#12924 report it
ajimatahari at 2013/04/21 05:29am
upload worked, but the status failed was given

hi, i'm figuring out what's wrong with my code, i used your extension. it's worked to upload file to specified folder. but the status "Failed" was printed: "tbl_datasiswa.xls 62.0kB Failed" . there's also undetected file inside the specified folder (but the files is there): "{"error":"No files were uploaded."}"

#12906 report it
Konstantinos Filios at 2013/04/19 08:15am
Fork for fineuploader 3.4.1

Hi kosenka,

thanks a lot for the great plugin. I just wanted to let you know I've forked your repo on github and made some (unfortunately not backward compatible) changes to integrate with the Fine Uploader 3.4.1.

https://github.com/drcypher/EAjaxUpload

#12364 report it
Legolas at 2013/03/15 02:24pm
Re: Upload Failed.

Try to add something like this in your _form.php view:

<div class="row">
  <?php echo $form->labelEx($model,'logo'); ?>
  <?php 
      $this->widget('ext.EAjaxUpload.EAjaxUpload', array(
         'id'=>'image',
         'config'=>array(
         'action'=>Yii::app()->createUrl('/associazioni/upload'),
         'allowedExtensions'=>array("jpg", "jpeg", "png", "gif"),
         'sizeLimit'=>2*1024*1024,// maximum file size in bytes
         'onSubmit'=>"js:function(file, extension) { 
                        $('div.preview').addClass('loading');
                      }",
         'onComplete'=>"js:function(file, response, responseJSON) {
                          $('#thumb').load(function(){
                            $('div.preview').removeClass('loading');
                            $('#thumb').unbind();
                            $('#Associazioni_logo').val(responseJSON['filename']);
                          });
                          $('#thumb').attr('src', '/../images/temp/'+responseJSON['filename']);
                        }",
    'messages'=>array(
            'typeError'=>"{file} has invalid extension. Only {extensions} are allowed.",
            'sizeError'=>"{file} is too large, maximum file size is {sizeLimit}.",
            'emptyError'=>"{file} is empty, please select files again without it.",
            'onLeave'=>"The files are being uploaded, if you leave now the upload will be cancelled."
        ),
      )
    )); 
 
 
    echo $form->hiddenField($model,'logo');
    echo "<img id='thumb' src='/images/associazioni/".$model->logo."'>";
  ?>
  <?php echo $form->error($model,'logo'); ?>
</div>
#12362 report it
Queryton at 2013/03/15 02:02pm
Re: Upload Failed

I'm sure it's possible with JS.

You could probably use a renderPartial method which pulls the image.

Something like this perhaps: http://www.yiiframework.com/wiki/49/update-content-in-ajax-with-renderpartial/

EDIT: I looked through the code once more, you could probably push the "preview" exactly like the "success" message or "failed" message.

The relevant code is in EAjaxUpload/qqFileUploader.php, at line 143.

#12361 report it
MiroK at 2013/03/15 01:58pm
Re: Upload Failed

Thanks guys, I added app()->getBaseUrl() to the path is it works now.. Probably got lost in the folders..

Now, is there any way to push the uploaded image to the form as a preview, before submitting the form? Can I call a JS script from actionUpload() right after the image is uploaded? Or is there any other way?

#12360 report it
Queryton at 2013/03/15 01:07pm
Re: Upload Failed

MiroK, make sure your upload path is correct as well. (e.g. "images/uploads/" is what I used to make it work)

#12359 report it
Legolas at 2013/03/15 01:01pm
Re: Upload Failed.

@MiroK: try to lower the size limit to e.g. 1 mb, both in the view and in the controller

#12355 report it
MiroK at 2013/03/15 11:02am
Upload Failed.

Hi, it doesn't work for me.. I've create a new controller called Image, with index and upload actions. Copy/Pasted VIEW portion of the code into /protected/views/image/index.php and modified createUrl('controller/upload') to createUrl('image/upload') and changed the minimum and maximum sizes to match the server's configuration.

then I copied the controller portion into /protected/controllers/ImageController.php, with no modifications.

when running, I get the red upload button, select the image, I see the upload process going up to 100% and then it just adds "Failed" after the filename and stops...

what's wrong? help please.. thanks in advance..

#12296 report it
mahmoud khafagy at 2013/03/11 11:41pm
i have an error on online site because permission

that is error is response when i upload file this error is happen on online site

PHP Error [2]

tmpfile() has been disabled for security reasons (/home/aqar4/public_html/protected/extensions/EAjaxUpload/qqFileUploader.php:12)

this error happen in function save as i need what is permission i need to enable it to solve this problem and this tmpfile function is not in disable_function in php.ini or i need can i replace function saveas with another function dont use tempfile to solve this problem

Leave a comment

Please to leave your comment.

Create extension