I am looking for a gem so that the user can crop it when choosing a photo.
The user clicks on "upload photo" and then when he selects his photo, a form appears for him to crop the photo. Since regardless of the size you upload, they must all have the same dimension
I have tried without success to use npm, cdn and libraries like Cropper, Croppi and Cropbox js
this is my code:
.form__group
.upload__wrapper
= f.input name, as: :file, input_html: { id: "image", :'data-label' => defined?(input_label) ? input_label : 'add file' }
label = "Max 2
pdd: the photo upload does work, what I'm looking for is that once the user selects any photo, it automatically gives him the option to crop it
If you want to permit the user to select a specific portion of the photo, than you should use something like Cropper JS or similar to allow that kind of UX/UI at the front-end level.
Once you know which portion the user selected, you have to send those data (for example x-y coordinates selected by user) to the back-end (rails controller, model ...).
At the back-end side you have to manipulate the photo, to crop it and this can be done for example with a gem such as kt-paperclip ( https://github.com/kreeti/kt-paperclip ).
That gem use imagemagick ( https://imagemagick.org/index.php ) commands which is really powerful and allow you to manipulate the photo in many different ways. You could write your own processor which apply imagemagick commands based on the input you provide to it.
Not sure, but maybe you could also achieve the same with ActiveStorage and image processing.
FYI https://guides.rubyonrails.org/active_storage_overview.html
Related
I'm bulding a website that allows users to upload a picture and then get the EXIF info shown in a user-friendly way.
I also want to make available an option for users to be able to share their picture online.
At the moment I already have the JavaScript for the image preview fully working, I select an Image on a Form and it appears on the website...
I also have the upload part of the code working as well (PHP). The image gets uploaded to a folder and the name and path of the respective image get uploaded to the MySQL database.
The thing is... I want the process to happen in this way:
User selects the picture - WORKING
The picture appears on display as a preview - WORKING
User presses the upload button (if he wishes to) - WORKING
The image gets uploaded to the defined folder and the name and path to the DB - WORKING
Website stays on the same page with the image preview still there... - TO BE DONE
A new text-area appears on the website with the image path inside (gotten from the database) so the user can share the image - TO BE DONE
----------------//-------------------
I've read some articles and topics on this and supposedly it needs to be done using JQuery in order to work in the way I defined above...
Could you guys clarify if that's true?
---------------//---------------
UPDATE
The solution #Dhanushka sasanka presented worked! I can now upload the picture to the folder and the info to the database and it stays on the page without refreshing!!
I did this You must use JqueryForm Plugin to do this because In the Form that your "upload" button it must be type="submit" therefore current page will be reload after pressing that "upload" button so you must use this plugin JQuery Form Plugin
Go through this one.from this you can uplaod your image without reloading page.
Sending data to server in background without refresh/reload/change the current page can be done with javascript AJAX Request.
If you want to pass data to server and stay on the same page, Then Yes you need to use AJAX in Javascript.
But using Jquery is much easy to implement Ajax request and callbacks, So go with jQuery.
I am creating a user flow that allows users to edit an svg and save continuously via javascript. However, I don't like saving the image file over and over again. Is there a way to do a partial upload? I know you can do a GET with the image, color, and coordinates. Is there a way to similarly do POST? I.e. only send the server the change that occurred to update the image file with?
My website basically consists of photo galleries that people can browse. On the main page, people can choose to access the gallery of images then in the gallery, they can select which photo they want to see.
This is an image of the possible different ways to give users picture choices. On my site now, I offer the left-most options because of compatibility for all browsers.
The option format I want on my site is defined under "Desired Options". When a user selects a boxed arrow, the number (shown as ## here) will automatically increment or decrement. then when GO is clicked, the URL is then http://example.com/picturenumber/##. So if users use the up and down arrow buttons to select number 10 and GO is clicked, then http://example.com/picturenumber/10 is the resulting URL.
Here's the issue
To achieve the above, I feel I need to use javascript. I believe at least one person in this whole world that wants to use my site uses a device or browser with no javascript support. This forces me to use the option format on the far right, a basic text box for the picture number to be typed in and a GO button.
My partial answer to my question is this:
Use this HTML:
Enter #:
and this PHP named imagepicker.php:
While this does work, the problem is that an extra request is required to fully process the user's request.
I feel my only other options to solve my problem are either:
Not use friendly URLs and make them compatible so that when the form is submitted, the correct URL is loaded without the need for an extra request. For example, make this URL the official image URL displayed in the address bar: http://example.com/imagepicker.php?number=##
OR
List every single image number on the main page which is rather redundant because the list is in the gallery page.
I even thought of using a combo box in place of a text box and that wouldn't help either.
Is there some way I can do this so that users with no javascript support can enter an image number and then with a click of a button, be taken to that image without requiring the resulting image page to be accessed at a not-so-friendly URL and without listing all image numbers at once? If so, what would you suggest?
So, basically it boils down to a HTML problem in which you need to increment some numbers pressing buttons that alter the format of the URL in order to be friendly, and after that, you have to produce a postback. I think you need javascript for it.
Without javascript, I think the best solution is to sacrifice friendly URLs and create a form with method GET, so the choice that the user writes will be sent to the server as part of the query string. But only for those users that don't have javascript on their browsers. You can use javascript for the rest, but if you do that, it would be better to keep the "unfriendly" URL format for consistency and maintainability.
I'm building a website in which the user can create articles with multiple images. Of Course that images will have relation with article.
All works good using laravel (php) and mysql. The database has the relation of images and articles.
Now I would like to add a new feature so as the user can upload or remove image from article so I thought to use dropzone library.
Now using dropzone there is one big problem. The dropzone upload the images on the server without any problem, but then when I click the submit button to save the article I would like to get again that images so I can make the relation with article.
Is there any way to do that?
Normally, to upload a file, it would be two-steps process - select a file and then confirm upload. I am working on uploading profile picture. Since profile pic is usually small, I want to reduce mouse-clicks for my users by making the file upload to start upon file selection. Please suggest good, and perhaps common, ways to achieve this (I would also like to learn their pitfalls, if any). Thanks.
The change event will fire when a file is selected from a file upload field. The value of the field will be '' if no file is selected (field is cleared).
<form method="post" action="upload.script">
<input type="file" id="formfile"/>
<input type="submit" id="formsubmit"/>
</form>
<script type="text/javascript">
var file= document.getElementById('formfile');
var submit= document.getElementById('formsubmit');
// If scripting is available, can auto-submit the form, so no submit
// button needed.
//
submit.parentNode.removeChild(submit);
// When field is filled in with a filename, submit form
//
file.onchange= function() {
if (this.value!=='')
this.form.submit();
};
</script>
Is this a good idea? Questionable. Automatically submitting a form if the user doesn't expect it may have a negative impact.
You could use JQuery to automatically post the file to the sever upon selection...
Problems:
What if the user doesnt want to choose that file but the file has already be uploaded to the server?
What if the previous takes place before the file has finished uploading?
How about when the user doesn't do anything and closes the page? How long will you keep the file
If you use GMail, you'll notice they have a drag-drop solution for attaching files to an e-mail. Drag from your desktop onto a predefined region and wallah.
If you have HTML5 support for the people using this (most should if they're keeping up to date) then you could use the drag-drop built in to HTML5.
Try looking at this: http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/
You could also give something like Plupload a try (http://www.plupload.com/) but that might be overkill for this. Plupload is more will suited for larger files that need progress animations and chunking. However, I know you would be able to script it such that the upload starts immediately and you redirect as soon as it completes. It also might need server-side work that you aren't set up for.