Slim Was Not Used to Upload These Images.
Slim Paradigm Cropper
4.94 out of 5 stars based on 287 reviews
- Price
- $89
- Includes
-
- futurity updates
- 6 months professional person support
Slim is a cross platform JavaScript Paradigm Cropper. It's easy to setup and features beautiful graphics and animations.
Your users volition exist cropping and rotating images in no time.
Feature overview:
- Responsive and Mobile Friendly
- Fast and Beautifully Animations
- Crop, Rotate and Upload images
- Drag and Drop Images and URLs
- Works on all Major Browser
- JavaScript and jQuery API
Works standalone but ships with handy wrappers for jQuery, React, Angular (1.x and newer versions), VueJS, Bootstrap and Foundation.
Slim image cropper is no longer bachelor for buy.
Slim paradigm cropper has been discontinued in favor of Pintura Epitome Editor and CropGuide Epitome Cropper.
Pintura is a JavaScript Image Editor SDK similar to Slim, it offers cropping functionality and much more.
Larn more than about Pintura
CropGuide is a NoCode Image Cropper, it is the easiest way to add image cropping to a file upload field, it doesn't require any lawmaking changes.
Learn more virtually CropGuide
What Our Customers Say...
One of the best downloads I ever fabricated. Design is top notch. The client back up is excellent.
Great, easy to use plugin for paradigm upload and cropping. Sleek design that will fit the look and feel of whatever modern website. Had some issues with implementing into a complicated AJAX form and the customer support was superb!
Worth every cent. Does the job as promised. Had some server-side problems setting it up, but the back up was pure gold. Even got some actress coding help.
Drag, Drop 'n Crop
Permit'southward give Slim a exam run, drop an paradigm in the Slim drop area beneath.
If you're old schoolhouse, clicking the drop area volition piece of work only likewise.
<div grade="slim" data-ratio="16:9" data-service="async.php" data-fetcher="fetch.php" information-size="640,640"> <input blazon="file" proper name="slim[]"/> </div> Edit Server Images
Got images on your server that are in need of some cropping? Put an img within the Slim chemical element and it will automatically be made ready for cropping.
<div class="slim" data-service="async.php" data-fetcher="fetch.php" data-ratio="3:two" data-size="600,400" data-max-file-size="2"> <img src="./media/stars.jpg" alt=""/> <input type="file" name="slim[]"/> </div> Form Post
In the first demo the content was posted using AJAX, in this one, well use the good old grade to postal service our cropped epitome.
Note that nosotros prevent grade submission with the required attribute on the input file tag.
<grade action="post.php" method="post" enctype="multipart/form-information" class="avatar"> <div class="slim" information-label="Drop your avatar here" data-fetcher="fetch.php" data-size="240,240" data-ratio="one:1"> <input type="file" name="slim[]" required /> </div> <button blazon="submit">Upload now!</button> </form> Easy Configuration
Slim tin can be setup using only HTML. See the aspect overview below for an outline of Slims configuration options.
| Attribute | Description |
|---|---|
| data-ratio | What ratio should the ingather be in, default ratios are all supported Custom ratios can too exist ready, Slim will calculate the correct container size automatically. e.g. Set to Set the value to The default value is "gratis" |
| |
| data-size | Decide the target size of the resulting prototype. For case By default Slim does not resize the output image. |
| |
| data-min-size | Determine minimum size of the crop in pixels For example If the minimum width defined is bigger than the tiptop of the image the rotation button will just rotate the image by 180 degrees instead of 90. By default Slims minimum size is 100 by 100 pixels this prevents the controls of the cropper from overlapping. |
| |
| data-force-size | Determine the forced output size of the resulting image. For example Forcefulness size will also gear up the aspect ratio to fit the supplied size, and then with forcefulness-size gear up to By default Slim does not resize the output image. |
| data-force-min-size | Set to Default is "true" |
| data-filter-sharpen | Slim can sharpen images after they've been resized, this tin be used to highlight colors and high contrast edges. This can lead to a slight comeback in image clarity. Takes a value between By default Slim does not sharpen images. |
| data-service | When set, the cropped image will exist sent to the set URL using AJAX. Slim ships with an instance upload PHP file which is also used on this website (async.php). An upload button will appear unless the The server can optionally render a JSON response to indicate a successful upload. Yous can besides set a function reference, in that case Slim volition call the office passing the following parameters. By default the image information is posted to the server without AJAX. |
| information-service-format | If the By default Slim volition transport information as a FormData Object. Set this attribute to |
| data-fetcher | By default Slim will not load dropped URLs as it needs a server script to practice so. The Configuring Slim like shown beneath will enable the URL drop characteristic. By default no remote fetch service is defined. |
| information-upload-base64 | Determines if the asynchronous upload method (data-service) sends base64 information or sends a file object. "false" |
| data-upload-method | The default request method used to asynchronously send data to the server. "POST" |
| data-meta-* | Utilize this attribute to send boosted information to the server. For example setting Run into Sending Additional data to the server for more data. |
| data-push | When set to Default is "false" |
| information-post | What information to send to the server. The original input image, the cropped output image and/or the actions (crop position and size). Can be set up every bit a comma separated list Note that when sending the input image forth the resulting upload size can potentially go two times as big as the original epitome (input + output). Input and output metadata like filename, size, width and height will always be sent. Past default only the "output" and the user "actions" are sent. |
| data-jpeg-compression | The corporeality of JPEG pinch to apply to cropped JPEG images. Ranges from 0 (for high pinch) to 100 (no compression). By default Slim uses the browser JPEG pinch value which is around 90%. |
| data-internal-canvass-size | Some devices have limited memory and therefor cannot load super loftier resolution images. To cope with big amounts of data y'all can set the maximum internal canvass size Slim uses to load data, images that are bigger are scaled downwards to this size. Past default the value is gear up to By default Slim uses a maximum of 4096 by 4096 pixels. |
| data-force-type | Force output type, ready to either "png", or "jpg" and Slim will supersede the extension and save file in the given format. By default Slim tries to notice the file type, if it cannot be determined it falls back to "png". Default is "false" |
| data-default-input-name | The name of the default input field. The default value is in array format and so multiple Slim croppers can post to the aforementioned input name. This is only used if at that place's no subconscious input to write to and no service url has been prepare. By default this is set to "slim[]" |
| data-save-initial-image | When ready to Default is "false" |
| data-download | When set to Default is "simulated" |
| |
| data-rotate-button | When set up to Default is "truthful" |
| data-edit | When prepare to Default is "truthful" |
| data-instant-edit | When set to Default is "fake" |
| data-crop | Pass initial crop coordinates. The format is a comma separated listing of coordinates (ten, y, width, superlative). Setting Please non that this only crops the initial image. Subsequent images will not be cropped with these settings but volition use motorcar crop. Use case could be an avatar upload form. Where you lot might want to allow the user to edit the previously uploaded original epitome instead of the cropped version but practice want to show the cropped preview. |
| data-rotation | Pass rotation for initial epitome. When set, has to be either "90", "180" or "270". Please non that this only rotates the initial prototype. |
| data-copy-image-head | Fix to Default is "false" |
| data-device-pixel-ratio | The device pixel ratio used to render the images. Set to Default is "ane" |
| information-popover-grade-name | Add custom course name to popover editor. |
| information-label | The label shown in the drop area. "Driblet your image here" |
| |
| data-label-loading | The label shown in the drop surface area while loading. "Image loading..." |
| data-button-*-label | Replace the star with For example Annotation that the label is only shown on the |
| data-button-*-title | Supplant the star with By default the championship contains the same value as the label |
| information-button-*-form-name | Useful for when yous desire to add together boosted course names to on of the action buttons. |
| information-max-file-size | The maximum file size the user is allowed to upload in megabytes. A value of By default no limit is set on file size |
| data-status-file-size | The status text shown when a user tries to upload a file that'southward too big. The default is: "File is too big, maximum file size: $0 MB." The |
| data-status-file-type | The status text shown when a user tries to upload an invalid file. You tin ready the immune file types using the You lot can likewise supply multiple mime types by comma separating them: The default text is as follows: "Invalid file type, expects: $0." The |
| data-status-no-back up | The status text shown when the user is non running a modern web browser. The following browsers and devices are supported.
On very old browsers (older than Internet Explorer viii), Slim won't load due to lack of JavaScript functionality. The default text reads as follows: "Your browser does not support paradigm cropping." |
| data-status-paradigm-too-small | The status text shown when the user is trying to load an image that is smaller than the value set in "Image is too pocket-size, minimum size is: $0 pixels." The |
| information-status-content-length | The status text shown when the user uploads a file that is besides big for the server to handle. Slim tries to interpret the error page the server returns if it contains the term "Content-Length" it will assume it's because the prototype is too big. Keep in mind that while the input file may autumn beneath the limit of your server, the total uploaded bytes could perhaps be college (if you for example send both "input" and "output" to the server). The default text reads as follows: "The file is probably too large" |
| data-condition-unknown-response | The error text shown when the server returns an unknown response. Default: "An unknown error occurred" |
| data-status-upload-success | The status text shown when the image is uploaded correctly. Default: "Saved" |
| data-did-init | A callback method that gets called when Slim has initialised. The role arguments consist of a single object reflecting the electric current crop state. |
| data-did-load | This callback method is called when an paradigm was loaded and passed the default input validation methods. The return value of the did-load callback determines what Slim does next. This setup makes information technology possible to do custom validation. For instance, the validation rule below checks if the dropped image contains "warm" enough colors. Dropping images with more often than not bluish, green or purple tones will result in an mistake. |
| |
| data-did-transform | This callback method is called later the image has just been transformed (cropped or otherwise updated). The only passed parameter contains the current crop state. |
| data-will-crop-initial | This callback method is called before the initial crop is made. It receives the prototype file as only parameter and expects an initial ingather rectangle as event. |
| information-will-transform | A callback method that gets called after each epitome transform. Slim sends the following ii parameters along: When calling the You could for case employ this method to add together watermarks to images, or mask images, similar shown in the demo below. |
| |
| Hither nosotros apply a mask to the image in the will-transform callback | |
| |
| In this instance we add a watermark to the image. | |
| |
| data-volition-save | Like to the Continue in mind that, every bit with the When adding custom backdrop to the crop land object, brand sure they are all contained in a parent belongings called |
| data-did-salvage | Called later the current crop object was saved. Receives the crop land object as it's only parameter. |
| information-did-ostend | Called after the user pressed the image editor confirm button. |
| information-did-cancel | Chosen after the user pressed the image editor cancel button. |
| data-did-upload | Callback function that gets chosen when Slim uploads a file and the server returns with a success or failure. If something went wrong the |
| data-did-receive-server-error | By default Slim will return the "unknown error" response if the server triggers an fault (if the status property in the response object equals The error returned in the callback is the mistake message Slim will show in the visual condition message. |
| data-will-remove | A callback method that can be used to block the actual removal of the image. This allows y'all to setup a "delight confirm prototype removal" message. This method will not be called when the API |
| data-will-request | A callback method that tin can be used to add additional request headers to the upload XMLHttpRequest object. |
| data-will-fetch | A callback method that tin can be used to add together additional asking headers to the fetch XMLHttpRequest object. |
| data-will-load | A callback method that can be used to add together additional request headers to the load local image XMLHttpRequest object. |
| |
| data-did-remove | A callback method that allows you to detect when the user has removed an image. Slim returns the previous crop land object that would have otherwise been send to the server. |
| data-did-throw-error | A callback method that receives all visual errors thrown past Slim. Receives the mistake as just parameter. |
JavaScript API
If yous're using jQuery, Slim automatically sets upwardly the jQuery API for your convenience. Want to become Vanilla? No problem at all.
Creating a new cropper
Hither'southward how you'd plough the post-obit HTML into a Slim cropper.
<input type="file" id="myCropper"/> Using good ol' JavaScript.
new Slim(document.getElementById('myCropper')); And this is how you'd do that with the jQuery API.
$('#myCropper').slim(); Setting custom options
The JavaScript/jQuery API unlocks the same set of options equally the HTML API.
- edit
- ratio
- size
- rotation
- post
- service
- serviceFormat
- uploadBase64
- push
- crop
- instantEdit
- jpegCompression
- filterSharpen
- forceType
- forceSize
- forceMinSize
- defaultInputName
- minSize
- maxFileSize
- download
- fetcher
- saveInitialImage
- internalCanvasSize
- rotateButton
- characterization
- labelLoading
- statusFileType
- statusFileSize
- statusNoSupport
- statusImageTooSmall
- statusContentLength
- statusUnknownResponse
- statusUploadSuccess
- button*Label
- push*ClassName
- button*Title
- uploadMethod
- willTransform
- willSave
- willRemove
- willRequest
- willFetch
- willLoad
- didInit
- didLoad
- didTransform
- didCancel
- didConfirm
- didSave
- didRemove
- didUpload
- didReceiveServerError
Replace the * in the push backdrop with one of the following buttons to alter it's properties.
- Confirm
- Cancel
- Rotate
- Remove
- Edit
- Download
- Upload
- JavaScript
- jQuery
An example code snippet passing custom options in JavaScript.
new Slim(chemical element, { ratio: 'iv:3', minSize: { width: 640, height: 480, }, crop: { ten: 0, y: 0, width: 100, superlative: 100 }, service: 'upload-async.php', download: false, willSave: function(information, ready) { alert('saving!'); ready(data); }, label: 'Drop your prototype here.', buttonConfirmLabel: 'Ok', meta: { userId:'1234' } }); The options object is identical.
$(selector).slim({ ratio: 'iv:3', minSize: { width: 640, peak: 480, }, crop: { x: 0, y: 0, width: 100, height: 100 }, service: 'upload-async.php', download: false, willSave: function(data, ready) { alarm('saving!'); ready(data); }, label: 'Drop your image hither.', buttonConfirmLabel: 'Ok', meta: { userId:'1234' } }); Initialising Slim inside a HTML snippet
<div id="my-snippet"> <!-- my offset cropper --> <input type="file" class="slim"/> <!-- my 2d cropper --> <input type="file" class="slim"/> </div> Below two examples on how to plow the elements with form slim into Slim croppers.
- JavaScript
- jQuery
Using JavaScript with we select the parent element using the getElementById method.
Slim.parse(document.getElementById('my-snippet')); In jQuery we can just pass the parent selector to the jQuery method.
$('#my-snippet').slim('parse'); Destroying a Slim prototype cropper
If you've manually created a Slim image cropper using the JavaScript/jQuery API you lot can destroy information technology using the destroy part.
- JavaScript
- jQuery
The API exposes a destroy method.
// Create a new cropper var cropper = new Slim(document.getElementById('my-cropper')); // Destroy the cropper cropper.destroy(); If yous want to destroy a cropper that was initialised automatically (or by using the parse method) you can use the destroy method on the Slim Class itself.
// Destroy cropper on element Slim.destroy(certificate.getElementById('my-cropper')); If you're using jQuery creating and destroying croppers can be done with a single destroy call.
// Create cropper(s) var croppers = $('#my-cropper').slim(options); // Destroy cropper(s) croppers.slim('destroy'); Manual loading and uploading of images
// Create a new cropper var cropper = new Slim(document.getElementById('my-cropper')); // Load prototype past url or laissez passer a File object // - The error parameter contains error messages cropper.load('path/to/image.jpg', function(error, data){ // Done loading the image! // Upload a selected image to the server cropper.upload( part(error, information, response){ // Washed uploading! }); }); Summary of case API methods
- JavaScript
- jQuery
Create a new Slim Cropper.
var cropper = new Slim(document.getElementById('my-cropper')); Test if Slim is spring to given element.
var state = cropper.isAttachedTo(element); Examination if Slim is however spring to DOM.
var state = cropper.isDetached(); Upload an image past url or data-uri.
// basic implementation cropper.load(src); // if you need to know when the image has loaded, pass a function // equally the 2d parameter cropper.load(src, function(fault, information) { // image load washed! }); // yous can also pass an options object // this options object too accepts a rotation and ingather parameter // these options reflect the functionality of the rotation and // crop options on the slim options object cropper.load(src, { rotation:90, ingather: {} }, function(error, data) { // image load done! }); // if 'push' is prepare to true, you tin can pass the blockPush // belongings to prevent firsthand upload on paradigm load cropper.load(src, { blockPush:true }, function(error, data) { // image load done! }); Upload currently loaded paradigm
cropper.upload( function(mistake, data, response) { // upload done! }); Download currently loaded image as file
cropper.download(); Request current output information
cropper.requestOutput( function(fileData, formData) { // fileData files // formData files wrapped in FormData object ready for submit }); Remove currently loaded image
var data = cropper.remove(); Destroy the cropper
cropper.destroy(); Get current data object
var data = cropper.data; // format of data object { // server response object later async upload server: aught, // meta data set with information-meta-* meta: {}, // the source file input:{ // input field id field: null, // name of file name: cipher, // mime type of epitome type: nil, // file loaded file: null, // file size in bytes size: null, // image base64 data or canvas image: zippo, // original dimensions of image width: 0, peak: 0 }, // the result of the crop output:{ // proper noun of file proper name: aught, // mime type of prototype type: nada, // image base64 information or canvas epitome: null, // output prototype dimensions width: 0, height: 0 }, // user actions actions:{ // angle of rotation in degrees rotation: null, // crop coordinates and blazon ingather: { // coordinates x: 0, y: 0, width: 0, summit: 0, // type of crop // - 'machine' // - 'initial' // - 'manual' type: cypher }, // output size size: { width: 0, height: 0 }, // applied filters filters: { acuminate: 0 } } } Get current data object in base64 format
var data = cropper.dataBase64; Get root element
var element = cropper.element; Do manual crop, please keep in mind that this method does not bank check if the input matches the required ratio or image size.
cropper.crop({x:0, y:0, width:100, height:100}, office(result) { // crop done! }); Open the editor
cropper.edit(); Set new output size
cropper.size = { width:640, height:480 }; // directly apply with fix method cropper.setSize({ width:640, elevation:480 }, part(information) { // done! }); ready new forced size
cropper.forceSize = { width:640, height:480 }; // directly apply with set method cropper.setForceSize({ width:640, summit:480 }, role(data) { // done! }); Set up new ratio
cropper.ratio = 'three:ii'; // straight apply with set up method cropper.setRatio('3:2', function(data) { // washed! }); Gear up new rotation
cropper.rotation = 90; // directly apply with set up method cropper.setRotation(xc, function(data) { // done! }); Summary of Static API methods
Tests if slims can be used on this browser.
var supported = Slim.supported; Parses the given DOM context for Slim croppers.
var croppers = Slim.parse(context); Finds a previously initialised cropper by element.
var cropper = Slim.detect(context); Creates a cropper on the given chemical element.
var cropper = Slim.create(element, options); Destroys cropper attached to element
var success = Slim.destroy(element); Create a new Slim Cropper.
var $cropper = $('#my-cropper').slim(); Exam if Slim is spring to given chemical element.
var state = $(selector).slim('isAttachedTo', element); Test if Slim is withal leap to DOM.
var state = $(selector).slim('isDetached'); Upload an image by url or information-uri.
// basic implementation $(selector).slim('load', src); // if you need to know when the epitome has loaded, pass a office // as the second parameter $(selector).slim('load', src, function(error, information) { // paradigm load washed! }); // you can also pass an options object // this options object also accepts a rotation and crop parameter // these options reflect the functionality of the rotation and // crop options on the slim options object $(selector).slim('load', src, { rotation:90, crop: {} }, role(error, data) { // paradigm load done! }); // if 'push' is set to true, you can laissez passer the blockPush // property to forbid immediate upload on image load $(selector).slim('load', src, { blockPush:true }, part(error, data) { // paradigm load washed! }); Upload currently loaded image
$(selector).slim('upload', function(error, data, response) { // upload washed! }); Download currently loaded image as file
$(selector).slim('download'); Remove currently loaded image
$(selector).slim('remove'); Destroy the cropper
$(selector).slim('destroy'); Get electric current data object
$(selector).slim('data'); // format of data object { // server response object afterwards async upload server: null, // meta data ready with data-meta-* meta: {}, // the source file input:{ // input field id field: null, // name of file proper name: null, // mime type of image blazon: nothing, // file loaded file: null, // file size in bytes size: null, // image base64 information or sheet paradigm: cipher, // original dimensions of image width: 0, height: 0 }, // the consequence of the crop output:{ // name of file name: null, // mime type of epitome type: null, // paradigm base64 information or canvass image: null, // output paradigm dimensions width: 0, height: 0 }, // user actions actions:{ // angle of rotation in degrees rotation: nada, // crop coordinates and type ingather: { // coordinates ten: 0, y: 0, width: 0, height: 0, // type of crop // - 'auto' // - 'initial' // - 'transmission' type: null }, // output size size: { width: 0, summit: 0 }, // practical filters filters: { acuminate: 0 } } } Get electric current data object in base64 format
$(selector).slim('dataBase64'); Get root element
$(selector).slim('element'); Practise transmission crop, please keep in mind that this method does not check if the input matches the required ratio or image size.
$(selector).slim('crop', {x:0, y:0, width:100, meridian:100}, role(result) { // crop done! }); Open the editor
$(selector).slim('edit'); Set new output size
// only prepare the size $(selector).slim('size', { width:640, height:480 }); // directly apply, callback method is called on completion $(selector).slim('setSize', { width:640, height:480 }, office(data) { }); Set new ratio
// only set a new ratio $(selector).slim('ratio', 'three:two'); // directly apply the ratio $(selector).slim('setRatio', 'iii:two', function(data) { }); Prepare new ratio
// only set a new rotation $(selector).slim('rotation', 90); // directly utilise the rotation $(selector).slim('setRotation', xc, function(information) { }); Summary of Static API methods
Tests if slims can be used on this browser.
var supported = $().slim('supported'); Parses the given DOM context for Slim croppers.
// Return value is non croppers but nodes parsed equally // information technology's possible to supply multiple nodes using a // single selector. var $elements = $(selector).slim('parse'); Creates a cropper on the given element.
var cropper = $(selector).slim(options); Destroys cropper attached to chemical element
var success = $(selector).slim('destroy'); PHP API
Slim ships with a static PHP Class which you can use to access the posted data.
Employ the getImages() method to quickly get the posted prototype(s).
$images = Slim::getImages(); If you've setup to use a unlike name than "slim" pass it forth.
$images = Slim::getImages('myFieldName'); If merely one image was posted information technology can be constitute at index 0.
Every bit the default slim field name ("Slim[]") allows to upload multiple images under the same name the PHP script assumes it receives an assortment of images.
$images = Slim::getImages(); $image = $images[0]; Store the image on your server with the saveFile() method (ready to use examples of this are included in the parcel). All the information of the original image tin can be accessed through the image object returned by the getImages() method.
// let's create some shortcuts $name = $prototype['output']['name']; $data = $epitome['output']['information']; // store the file $file = Slim::saveFile($information, $name); Past default the saveFile method stores the prototype in the "tmp" folder. If you lot desire to store images in a unlike folder you can pass the folder proper noun along as the third parameter to the shop method.
$file = Slim::saveFile($data, $proper name, 'myFolder/'); The saveFile() method returns a file object. This object contains the name of the file and the file path. The proper noun of the file volition exist different from the name of the image as the original prototype name is prepended with a unique id before saving.
$file = Slim::saveFile($data, $proper name); echo $file['name']; // 573f60ddd630f_imagename.jpg echo $file['path']; // tmp/573f60ddd630f_imagename.jpg If you don't want a unique id call the saveFile() method like shown below.
$file = Slim::saveFile($information, $proper noun, 'myFolder/', false); Sending Boosted Information to the Server
If y'all want to add custom data to the Slim object you have to use the meta belongings. The Slim.php script will clean upward the data sent to the server but will leave the meta property alone.
Using the data-meta attribute (or option holding) you lot can set static values in String format only. For example setting data-meta-user-id to 1234 wil result in the post-obit boosted object being sent to the server.
{ "meta":{ "userId":"1234" } } You lot tin at present access the metadata on the server as you would whatever other object, encounter the code snippet below.
// get the paradigm data $images = Slim::getImages(); $paradigm = $images[0]; // impress metadata repeat $image['meta']->userId; // "1234" If you need to add metadata in a certain format (say Number or Boolean) you can add it in the willSave phase. See the instance below where we ship a timestamp to the server in Number format.
By submitting the class beneath you tin can view the metadata in the table rendered by the postal service.php page.
<script> function addTime(data, gear up) { // add together boosted data data.meta.now = Date.now(); // go on saving the data ready(data); } </script> <class activeness="post.php" method="post" enctype="multipart/course-information"> <div class="slim" data-meta-user-id="1234" information-ratio="xvi:9" data-size="600,300" information-will-relieve="addTime"> <input blazon="file" name="slim[]"> </div> <button type="submit">Ship!</button> </form> Form Post or AJAX Upload
If y'all're planning to send the cropped data to your server using AJAX, add together the data-service attribute and supply it with the url to the API endpoint.
If you don't set the data-service attribute Slim will shop the data in a automatically created hidden input field named "slim[]". If you add together a subconscious input field yourself, Slim will apply that field. When using AJAX Slim volition shop the server response in the hidden input field so after a form submit you know which file was uploaded last.
You can change the default name of the automatically created input using the defaultInputName property or the data-default-input-name attribute.
In both situations Slim will forbid the original file input from posting so data is not sent to the server twice.
Await 'n Experience
A large part of Slim can be restyled with bones CSS rules.
Rounded Corners
By default the Slim landing areas exercise not have rounded corners. Adding the following CSS rule will brand them overnice and circular immidiately.
.slim { edge-radius: 0.5rem; } Create a round drop expanse with the following snippet.
.slim { edge-radius: 50%; } Square Buttons
If circular buttons are not your affair, you can plough the Slim edit buttons into squares using the following snippet.
.slim-btn { border-radius: 0; } Show Buttons on Hover
If you simply want to prove buttons when the mouse hovers over the drop area.
.slim .slim-btn-group { opacity:0; transition:.25s opacity; } .slim :hover .slim-btn-group { opacity:i; } White Overlay
The default overlay is dark, y'all can turn information technology around to the bright side using the following CSS snippet.
.slim-popover { background-color: #efefef; } .slim-image-editor-btn { colour:#999; } .slim-image-editor-btn :focus, .slim-image-editor-btn :hover { color:#777; } .slim-image-editor-preview ::after { groundwork-colour: rgba(0, 0, 0, 0.25); } FontAwesome Icons
By default Slim features SVG icons. If y'all want to use an icon font utilise the following snippet.
This example replaces the icon of the edit button with the Font Crawly Cog icon.
<div grade="slim" data-button-edit-label="<i grade='fa fa-cog'></i>" information-button-edit-title="Edit"> ... </div> We have to hide the original icon and restore the font-size.
.slim-btn { font-size: 1em; groundwork-paradigm: none; } Text Buttons
If icons are but not your matter, hibernate the icons with the post-obit CSS snippet.
.slim-btn { width:motorcar; font-size:1em; padding: 0 1em; border-radius: 1em; groundwork-image: none; } White Buttons
The default buttons are black with a white icon. You tin can quickly make this white with a black icon by using the invert filter.
.slim-btn { filter: invert(100%); } Note that this does non work on Internet Explorer 11 and below.
React, Angular 'n Vue
Slim ships with React, Angular 1.x, Athwart, and Vue wrappers. These wrappers part every bit a basic gateway with the unmarried purpose of binding Slim to the supplied node and handling callbacks.
- React
- Angular 1.x
- Angular
- Vue
React has a custom component syntax. We apply the Slim element instead of a class and instead of the information attributes we pass the JavaScript options directly like shown in the case below.
import React, { Component } from 'react'; import Slim from './slim/slim.react'; class App extends Component { // chosen when slim has initialized slimInit(information, slim) { // slim example reference panel.log(slim); // current slim data object and slim reference console.log(data); } // called when upload push button is pressed or automatically if push is enabled slimService(formdata, progress, success, failure, slim) { // slim case reference console.log(slim) // form data to mail service to server // set serviceFormat to "file" to receive an assortment of files console.log(formdata) // telephone call these methods to handle upload state console.log(progress, success, failure) } render() { return ( <div className="App"> <Slim ratio="one:1" initialImage="test.jpg" minSize={ { width:600, pinnacle:400 } } service={ this.slimService.bind(this) } didInit={ this.slimInit.bind(this) }> <input type="file" proper name="foo"/> </Slim> </div> ); } } The Slim directive binds on the "slim" tag, you can add together the verbal same HTML attributes as in the other lawmaking examples.
<div ng-app="myApp" ng-controller="AppController"> <slim data-size="200,200" information-download="true" data-initial-epitome="exam.jpg" data-service="slim.service" data-did-init="slim.init"> <input type="file" proper noun="slim[]"/> </slim> </div> An example controller with callback method.
( function(angular){ var app; app = angular.module('myApp', ['slim']); app.controller('AppController', part($scope) { $scope.slim = { // called when slim has initialized init: role (data, slim) { // slim instance reference console.log(slim); // electric current slim information object and slim reference console.log(data); }, // called when upload button is pressed or automatically if push is enabled service: function (formdata, progress, success, failure, slim) { // form information to post to server // set information-service-format to "file" to receive an array of files console.log(formdata); // phone call these methods to handle upload state console.log(progress, success, failure); // reference to Slim instance console.log(slim); } } }); }(angular)); Angular is a tiny chip unlike. Options are passed to the Slim module as an object.
This code is compatible with Athwart 2 and upward.
When using Athwart CLI you lot'll take to brand some changes to the configuration files.
add together to /tconfig.js
-
"allowJs": true, -
"allowUnreachableCode": true,
add to /.angular-cli.json "styles" assortment
-
"app/slim/slim.css"
For Angular version vii and lower:
You need the slim.angular2.ts file and the slim.commonjs.js file.
/** * app.module.ts */ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { Slim } from './slim/slim.angular2'; // import from slim.angular2 file @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent, Slim ], // add annunciation bootstrap: [ AppComponent ] }) consign class AppModule { } For Angular version viii and up:
You demand the slim.angular.component.ts, slim.angular.module.ts and the slim.commonjs.js file.
/** * app.module.ts */ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@athwart/cadre'; import { AppComponent } from './app.component'; import { SlimModule } from './slim/slim.module'; // import from slim.module file @NgModule({ declarations: [AppComponent], imports: [BrowserModule, SlimModule], // add imports providers: [], bootstrap: [AppComponent] }) consign grade AppModule { } Usage is the same for all modernistic Angular versions.
/** * app.component.ts */ import { Component } from '@angular/cadre'; @Component({ selector: 'my-app', template: ` <slim [options]="slimOptions"> <input type="file" name="foo"> </slim> ` }) consign grade AppComponent { slimOptions = { ratio: 'one:1', download: truthful, initialImage: './test.jpg', service: this.slimService.bind(this), didInit: this.slimInit.bind(this) }; // chosen when slim has initialized slimInit(information:any, slim:any) { // slim case reference panel.log(slim); // current slim data object and slim reference console.log(data); }; // called when upload button is pressed or automatically if button is enabled slimService(formdata:any, progress:any, success:any, failure:whatsoever, slim:any) { // class information to mail to server // ready serviceFormat to "file" to receive an array of files console.log(formdata); // telephone call these methods to handle upload state console.log(progress, success, failure); // reference to Slim instance console.log(slim); }; } Options are passed to the Slim module as an object and we use the `slim-cropper` tag.
<template> <div> <slim-cropper :options="slimOptions"> <input type="file" name="slim"/> </slim-cropper> </div> </template> <script> import Slim from './slim/slim.vue' // called when slim has initialized function slimInit (data, slim) { // slim instance reference panel.log(slim) // electric current slim information object and slim reference console.log(data) } // called when upload push is pressed or automatically if push is enabled function slimService (formdata, progress, success, failure, slim) { // slim instance reference console.log(slim) // form data to post to server // set serviceFormat to "file" to receive an assortment of files panel.log(formdata) // call these methods to handle upload country console.log(progress, success, failure) } export default { name: 'hello', components: { 'slim-cropper': Slim }, data () { return { slimOptions: { ratio: 'ane:1', initialImage: require('../avails/test.jpg'), service: slimService, didInit: slimInit } } } } </script> Bootrap 'n Foundation
- Bootstrap
- Foundation
A snippet showing how to use Slim with Bootstrap.
<course> <fieldset class="form-group"> <label for="electronic mail">Email</label> <input type="e-mail" class="course-control" id="email"> </fieldset> <fieldset course="course-group"> <label for="avatar">Avatar</label> <input blazon="file" class="form-command slim" data-ratio="1:1" id="avatar"> </fieldset> </grade> An example of Slim being used in a Foundation form.
<form> <label>Eastward-mail service <input type="email"> </label> <characterization>Avatar <input type="file" form="slim" data-ratio="1:ane"> </label> </form> Feature Summary
- Beautiful Animations
- Correctly handles Device Orientation
- Very Fast
- Includes PHP sample files for both sync and async posting
- Compatible with both Bootstrap and Foundation
- Piece of cake to Configure
- High Quality User Experience
- Edit Server Images
- Responsive
- Vanilla JavaScript and jQuery
- Contains wrappers for Athwart, React and Vue
Slim image cropper is no longer available for purchase and has been discontinued in favour of Pintura image editor.
Source: https://pqina.nl/slim/
Post a Comment for "Slim Was Not Used to Upload These Images."