fileupload plugin

JBosir

JBosir

Member
Let me start by giving you an example.​
In this forum, when I want to download a file, I just click on the button, choose the image and right away the file starts downloading and finally it can be viewed. That's what I want to achieve.​
I've got a form for that, which includes a complement called fileuploadI've trying to make it work for a week and couldn't. When I click on the apply button, the table updates and also does the image. I think that for the moment that is a solution to the problem, that is, to download and update the image by calling the apply function on the validation button.​

I also tried to use Ajax upload. To me, that has a problem. First, you have to select and then download the file (it doesn't do it automatically) and at the end you have to click on a thumbnail to see the image as this is not viewed automatically.
What browsers do you need to support?

In HTML5, this can be done without storing anything on the server or submitting the form, by using the HTML5 FileReader JS class, which is supported by these browsers:

http://caniuse.com/#feat=filereader

It's something I've considered adding to the standard file upload element.

-- hugh
Click to expand...
Hello. Thank you for the answer.
Regarding the last comment:
I have prepared the pages so that you can see it.
I have proven HTML5 FileReader JS in a temporary page and it works well, the images refresh:
http://ma.eui.upm.es/new/test.php

In my page it doesn't work. It doesn't refresh the images, neither in the frontend neither in the backend.
http://www.ma.eui.upm.es/new/test/form/1/1-pepe
This post it was in Standard support. I take with the problem about twelve days.
I have to make a presentation and it begins to be urgent.
Does this have solution?
Thank you​
 
I assume you mean "upload" a file, not downloading.

"In this forum...": this forum is not Joomla nor Fabrik

This HTML5 feature is not yet implemented in the Fabrik fileupload element, it may be a new feature in the future.

In any case the record is only stored on save or apply, so you will see such an image in list and details view only after saving/applying the record.
Which is the same with this forum upload you are referring to: if you are uploading an image it's displayed, but if you don't save your post the image is gone afterwards.
 
In any case the record is only stored on save or apply, so you will see such an image in list and details view only after saving/applying the record.
Which is the same with this forum upload you are referring to: if you are uploading an image it's displayed, but if you don't save your post the image is gone afterwards.
Click to expand...

I understand perfectly.

In the example I show in my page, http://ma.eui.upm.es/new/test.php if I am uploading an image it's displayed, but with the fileupload plugin, loading an image is not displayed http://www.ma.eui.upm.es/new/test/form/1/1-pepe.

I thought that is a plugin error. For me it is important that the image is displayed at the time of download.
If this is not an error of the plugin, and will be a further improvement in the future, I asked if as a temporary solution, It is possible to automatically save or apply the record, putting code in element, validate, or form, plu-ins, php, eg After Process script any images Have Been upladed (on BeforeStore).
"In this forum ...": this forum is not Joomla nor Fabrik
Click to expand...
Sorry, what forum should I put these questions?
Thanks for your patience and tthat Improves the sick person.
 
Sorry, what forum should I put these questions?
Click to expand...
The forum is correct to place your questions.

But the software running the forum is not Joomla/Fabrik, so fileupload is done different.
 
My apologies if I gave you the impression the HTML5 solution was something we had already implemented. As I said, it's something I've thought about doing. I asked about the browsers you need to support, as not all browsers (even relatively new verisons) support the FileReader API, and if you needed this feature in a browser that doesn't support it, then even if I went ahead and added this feature to the upload element, that wouldn't help you.

However, from your recent post, it seems that you would be happy with an HTML5 solution, so I will look right now at the work involved in adding this feature to Fabrik.

-- hugh
 
OK, I got a simple version working:

http://screencast.com/t/59Rd0QRvmIoB

NOTES ...

It's not doing "thumbnails" yet, it just inserts the full sized image. I'm sure I could make it use the thumbnail size, if you have thubnails specified on your file element, I think I'd just need to add a class and some attributes.

I haven't tested it in repeat groups, only as a simple upload element in a non-repeating group.

I haven't tried getting it to work as a lightbox ... i.e. if you have lightboxing enabled, and when you load the form, your upload element has a functional lightbox effect (click on the thmbnail, get tghe full size image in a popup) ... I'm not quite sure what will happen after you select the new image.

I just don't have much time right now to do all that testing and adding those features ... unless you REALLY need them for your presentation.

Let me know.

Oh, and I haven't committed this code yet, I need to put in an option to enable disable it before I commit it to github.

-- hugh
 
Thank you. It is very important to my website.

I saw your version, and I'm happy. As to your post:

For me it is important option "display" "max width" and "max height", which is the size that the image is saved on my server.
I also use the option "thumbnails" to make it look on the web correctly.

It would not be necessary when the form is modified lighbox can do. In the list and view would be necessary.
upload a single image is perfect.

I have groups within the form.

If you want I prove on my website and see what happens.

Thaks.
 

Attachments

  • img1.png
    img1.png
    324 KB · Views: 303
OK I've committed what I have so far, as of this commit:

https://github.com/Fabrik/fabrik/commit/8be82092018b9eeebfeb017b6860db37bd9f3d96

So, if you update to the latest github, you should now have a "Use WIP" (Works in Progress) option on the main tab for your upload elements. Set that to Yes, which will enable using experimental / incomplete features like this.

Then you should see that when you select a new image file, it will redisplay in your form.

I haven't quite firgured out how to get it to use the thumbnail dimensions for the image yet. I'm trying to do it without using a CSS class, as that complicates things a bit, but it doesn't seem to honor the width.height attributes on the img tag .

Anyway, other than not using the thumbnail sizing for the newly selected image, let me know if there is anything else that needs fixing right away for your upcoming presentation.

-- hugh
 
Hello Hug. Thank you.

It works, but there are these problems:

In the file plugins\fabrik_element\fileupload\models\image.php

I have to remove this line so that the list is displayed (screen is blank).
line 168 // $ lightboxAttrs = FabrikHelperHTML :: getLightboxAttributes ($ title, $ n);
This line was added recently.

When a new record is added or the element is empty, you can add an image but this is not refresh.
As happens when you press the delete button, and then not refreshed.

I tried putting in "Display" put "default image", but this image does not appear to modify the form.
The image size saves and displays the parameters "Show" "Maximum width" and "maximum height", but as you say not displayed with "miniature". The lightbox works perfectly.

In groups:
when a new record is added or the element is empty, you can add an image but this is not refresh. Also, when you press the delete button, then it is not refreshed. In this case pressing the delete button deletes all images.
The size of the image is recorded correctly with the "Display" "Max width" and "Max height" parameters, but you see the maximum size. The lightbox works perfectly.


One solution I propose (if you do not mind) is to load the default image when modifying the form, and remove the "delete" button:

In the file plugins \ fabrik_element \ fileupload \ fileupload.php in line 2146
// $ render-> output = '<span class = "fabrikUploadDelete" id = "'. $ id. '_delete_span">'. $ this-> DeleteButton ($ value). $ render-> output. '</ span>';
$ render-> output = '<span class = "fabrikUploadDelete" id = "' $. id. '_delete_span">'. $ render-> output. '</ span>';

Sure you have a better idea.

Thank you.
 
Correct. I have but id With Different registers With The same userid.
Images are saved in different folders by id (see img1)
When I modify any register, I finally delete the image and saved (see img2), all images of the different registers With The same userid are deleted in the database (see img3).
 

Attachments

  • img1.png
    img1.png
    394.3 KB · Views: 272
  • img2.png
    img2.png
    288.7 KB · Views: 238
  • img3.png
    img3.png
    366.8 KB · Views: 247
Hi For the error related to $ lightboxAttrs = FabrikHelperHTML :: getLightboxAttributes ($ title, $ n);
I think you should update all of the fabrik files from github as that code does exist and doesn't cause an error for me.

I tried to connect to your site via ftp to debug the file deletion issue, but the ftp details supplied in my-sites do not seem to work. Could you check those are ok please?
 
Just FYI, that getLightboxAttributes was added in this commit:

https://github.com/Fabrik/fabrik/commit/fefa9ff23de49f302a2ec0ef0eaa415c7daaddbc

... which as you can see did add the FabrikHelperHTML::getLightBoxAttributes() function.

This probably means that you didn't do a complete github update, you just "cherry picked" the upload element files. Which you can't do. Whenever you do any kind of update from github, you MUST upload EVERYTHING, as changes to one file could well rely on changes to files elsewhere.

So we don't know if the problem with deleting images is an actual bug, or a side effect of your upload element code being out of sync with the rest of Fabrik.

Doing a complete github update may not solve the issue, but has to be done so we know you are running a complete set of up to date files.

-- hugh
 
Thank you. I do a backup and update all now.

Now you can connect via ftp. I was wrong with an uppercase.
Sorry.
 
Hello hugh. Hope you're in better health.

I remember that "Use WIP (Works in Progress)" was missing some details to me.

- The thumbnails.

- When a new record is added or the element is empty, you can add an image but this is not refresh. As happens When you press the delete button, and then a not refreshed.

I appreciate the effort. It would be for when you can do it.


In another post I am putting the problem of the images are deleted.

Thank you.
 
Can you confirm that the issue with images being deleted is fixed? I can't find the thread we had going about that, it was someone elses thread you had joined in on.

I think I may know why the image isn't being sized to the thumbnail ... I think the size has to be specified in a surrounding span, rather than in the img tag itself.

It probably doesn't work on "new" as I think I'm just changing the src="..." attribute on the existing img tag ... and if it's a new form with no image ... there's no img tag to change. Likewise if you delete the image, the img tag goes away.

I'll try and resolve those now, but I'm really pushed for time.

-- hugh
 
OK, I just committed a few changes, which will fix most of it. Not the "Delete" thing though. So it should work if your upload element is empty when the form is loaded - we now create the img tag and the div it sits in even if the field is empty on page load, it just gets hidden on load. Then when you select something (if it's an image), we'll then unhide it and set the img preview.

Also (think) I fixed the thumb sizing, which should go by the max thumb width you have set. Note that it just goes by the width, it doesn't try and work out the dimensions of the image and apply the smaller of the two. So sizing could end up being different to what the actual thumb gets created as. In other words, if you select (say) a "portrait" image, which is narrower than you max width but taller than your max height, the displayed thumb image will be bigger than the thumb that gets created when you upload.

Lightbox effect won't work, either.

And really, that's about all I can do for you on this for now. It's taken me a lot longer than I thought to get this done, I probably have at least 4 hours in it ... which really is an entire months worth of sub on one issue, when it comes down to how much we have to earn to styay afloat. If you need more work on this done to a deadline, it'll have to be done as custom work, billable by the hour.

-- hugh
 
You must log in or register to reply here.

Useful links

  • Create a Fabrik Account (Downloads)
  • Create a Forum Account
  • Fabrik Wiki
  • Fabrik 4 Changelog /Install /Upgrade
    • We are in need of some funding.
    More details.

    Thank you.

    Members online

    Total: 68 (members: 1, guests: 67)
    Back
    Top