Initial Commit

daniwebdev · daniwebdev · commit d6ff5d8a281c · 2020-06-18T02:34:20.000+07:00
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Title</title>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <style>
+        .preview {
+            height: 300px;
+            width: 300px;
+            background: black;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="container">
+        <div id="upload-area">
+            <input type="file" id="file">
+            <img style="border: 1px solid gray;" id="preview" src="https://via.placeholder.com/350x150" />
+        </div>
+    </div>
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,91 @@
+/* Utility function to convert a canvas to a BLOB */
+var dataURLToBlob = function(dataURL) {
+    var BASE64_MARKER = ';base64,';
+    if (dataURL.indexOf(BASE64_MARKER) == -1) {
+        var parts = dataURL.split(',');
+        var contentType = parts[0].split(':')[1];
+        var raw = parts[1];
+
+        return new Blob([raw], { type: contentType });
+    }
+
+    var parts = dataURL.split(BASE64_MARKER);
+    var contentType = parts[0].split(':')[1];
+    var raw = window.atob(parts[1]);
+    var rawLength = raw.length;
+
+    var uInt8Array = new Uint8Array(rawLength);
+
+    for (var i = 0; i < rawLength; ++i) {
+        uInt8Array[i] = raw.charCodeAt(i);
+    }
+
+    return new Blob([uInt8Array], { type: contentType });
+}
+
+
+$('#file').change(function() {
+
+    //Baca file dari input
+    let file = $(this)[0].files[0]
+
+    let reader = new FileReader();
+
+    reader.readAsDataURL(file);
+
+    reader.onload = (readEvent) => {
+
+        let target = readEvent.target;
+
+        let image = new Image();
+        image.onload = (imageEvent) => {
+
+            let def_width = 300;
+            let def_percent = (def_width / image.width) * 100;
+
+            let canvas = document.createElement('canvas');
+            let width = def_width;
+            let height = image.height * (def_percent / 100);
+
+            canvas.width = width;
+            canvas.height = height;
+
+            // canvas.getContext('2d').drawImage()
+            canvas.getContext('2d').drawImage(image, 0, 0, width, height);
+
+            let dataURL = canvas.toDataURL(file.type);
+
+            // console.log(dataURL);
+
+            let formdata = new FormData();
+            let blobImage = dataURLToBlob(dataURL);
+
+            formdata.append('file', blobImage, `resized-image_${file.name}`);
+
+
+            $('#preview').attr('src', dataURL);
+
+            $.ajax({
+                type: "POST",
+                url: "./upload.php",
+                success: function(data) {
+                    // your callback here
+                    console.log(data);
+                },
+                error: function(error) {
+                    // handle error
+                },
+                async: true,
+                data: formdata,
+                cache: false,
+                contentType: false,
+                processData: false,
+                timeout: 60000
+            });
+
+        }
+
+        image.src = target.result
+
+    }
+})
diff --git a/upload.php b/upload.php
@@ -0,0 +1,15 @@
+<?php
+// print_r($_FILES);
+
+$dir = './uploads';
+$file = $_FILES['file'];
+print_r($file['tmp_name']);
+$destination = $dir.'/'.time().'-'.$file['name'];
+
+move_uploaded_file($file['tmp_name'], $destination);
+
+header('content-type: application/json');
+echo json_encode([
+    'status' => true,
+    'message' => "Berhasil diupload."
+]); 
