Skip to content

Commit

Permalink
file uploads added
Browse files Browse the repository at this point in the history
  • Loading branch information
@siddhu007
siddhu007 committed Dec 14, 2023
1 parent 7498f8e commit c97c2df
Show file tree
Hide file tree
Showing 6 changed files with 329 additions and 0 deletions.
83 changes: 83 additions & 0 deletions file-upload/file-upload.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple File Upload</title>
<!-- Bootstrap 5.x or 4.x is supported. You can also use the Bootstrap css 3.3.x versions -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Default icons used in the plugin are from Bootstrap 5.x icon library -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" crossorigin="anonymous">
<!-- The FileInput plugin styling CSS file -->
<link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">
<h1>Multiple File Upload</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
<div class="mb-3">
<label for="file-input" class="form-label">Select Files:</label>
<input type="file" id="file-input" name="files[]" multiple />
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>

<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

<!-- Buffer.min.js and filetype.min.js are necessary for advanced mime type parsing and more correct preview -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/buffer.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/filetype.min.js" type="text/javascript"></script>

<!-- Piexif.min.js is needed for auto orienting image files -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/piexif.min.js" type="text/javascript"></script>

<!-- Sortable.min.js is only needed if you wish to sort/rearrange files in initial preview -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/sortable.min.js" type="text/javascript"></script>

<!-- Bootstrap.bundle.min.js is needed for zoom and preview file content in a detail modal dialog -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<!-- Main FileInput plugin script JS file -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/fileinput.min.js"></script>

<!-- Optional theme script for Font Awesome 5.x theme (`fas`) -->
<!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/themes/fas/theme.min.js"></script -->

<!-- Optionally, include the locale file for translation (replace LANG.js with your language locale) -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/locales/LANG.js"></script>

<!-- PDFObject library -->
<script src="https://cdn.jsdelivr.net/npm/pdfobject@^2.2.7/dist/pdfobject.min.js"></script>

<script>
$(document).ready(function () {
$("#file-input").fileinput({
theme: 'fas',
uploadUrl: '/upload', // Replace with your actual upload URL
uploadAsync: true,
maxFileCount: 5,
allowedFileTypes: ['image', 'video', 'pdf'],
showUpload: false,
showRemove: false,
overwriteInitial: false,
previewSettings: {
pdf: {
enabled: true,
renderer: 'pdfobject',
pdfRenderer: {
pdfjs: {
workerSrc: 'https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.js'
}
}
}
}
});
});
</script>
</body>

</html>
83 changes: 83 additions & 0 deletions file-upload/file-upload.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple File Upload</title>
<!-- Bootstrap 5.x or 4.x is supported. You can also use the Bootstrap css 3.3.x versions -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Default icons used in the plugin are from Bootstrap 5.x icon library -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" crossorigin="anonymous">
<!-- The FileInput plugin styling CSS file -->
<link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h1>Multiple File Upload</h1>
<form action="/file-upload/upload.php" method="post" enctype="multipart/form-data">
<div class="mb-3">
<label for="file-input" class="form-label">Select Files:</label>
<input type="file" id="file-input" name="files[]" multiple="multiple" />
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>
<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<!-- Buffer.min.js and filetype.min.js are necessary for advanced mime type parsing and more correct preview -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/buffer.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/filetype.min.js" type="text/javascript"></script>
<!-- Piexif.min.js is needed for auto orienting image files -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/piexif.min.js" type="text/javascript"></script>
<!-- Sortable.min.js is only needed if you wish to sort/rearrange files in initial preview -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/sortable.min.js" type="text/javascript"></script>
<!-- Bootstrap.bundle.min.js is needed for zoom and preview file content in a detail modal dialog -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- Main FileInput plugin script JS file -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/fileinput.min.js"></script>
<!-- Optional theme script for Font Awesome 5.x theme (`fas`) -->
<!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/themes/fas/theme.min.js"></script -->
<!-- Optionally, include the locale file for translation (replace LANG.js with your language locale) -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/locales/LANG.js"></script>
<!-- PDFObject library -->
<script src="https://cdn.jsdelivr.net/npm/pdfobject@^2.2.7/dist/pdfobject.min.js"></script>
<script>
$(document).ready(function() {
$("#file-input").fileinput({
theme: 'fas',
uploadUrl: '/file-upload/upload.php', // Replace with your actual upload URL
uploadAsync: false,
maxFileCount: 5,
allowedFileTypes: ['image', 'video', 'pdf'],
showUpload: false,
showRemove: false,
overwriteInitial: true,
previewSettings: {
pdf: {
enabled: true,
renderer: 'pdfobject',
pdfRenderer: {
pdfjs: {
workerSrc: 'https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.js'
}
}
}
}
});
});
</script>
</body>
</html>
78 changes: 78 additions & 0 deletions file-upload/fileupload.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple File Upload</title>
<!-- Bootstrap 5.x or 4.x is supported. You can also use the Bootstrap css 3.3.x versions -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Default icons used in the plugin are from Bootstrap 5.x icon library -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" crossorigin="anonymous">
<!-- The FileInput plugin styling CSS file -->
<link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h1>Multiple File Upload</h1>
<form action="/file-upload/upload.php" method="post" enctype="multipart/form-data">
<div class="mb-3">
<label for="file-input" class="form-label">Select Files:</label>
<input type="file" id="files" name="files[]" multiple="multiple" />
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>
<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<!-- Buffer.min.js and filetype.min.js are necessary for advanced mime type parsing and more correct preview -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/buffer.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/filetype.min.js" type="text/javascript"></script>
<!-- Piexif.min.js is needed for auto orienting image files -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/piexif.min.js" type="text/javascript"></script>
<!-- Sortable.min.js is only needed if you wish to sort/rearrange files in initial preview -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/plugins/sortable.min.js" type="text/javascript"></script>
<!-- Bootstrap.bundle.min.js is needed for zoom and preview file content in a detail modal dialog -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- Main FileInput plugin script JS file -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/fileinput.min.js"></script>
<!-- Optional theme script for Font Awesome 5.x theme (fas) -->
<!-- script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/themes/fas/theme.min.js"></script -->
<!-- Optionally, include the locale file for translation (replace LANG.js with your language locale) -->
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/js/locales/LANG.js"></script>
<script>
$(document).ready(function() {
$.fn.fileinputBsVersion = "3.3.7";
$("#files").fileinput({
theme: 'fas',
uploadUrl: '/file-upload/upload.php', // Replace with your actual upload URL
uploadAsync: false,
maxFileCount: 50,
allowedFileTypes: ['image', 'video', 'pdf'],
showUpload: false,
showRemove: false,
overwriteInitial: true,
previewFileType: 'any',
maxFileSize: 50000, // 50 MB in bytes
fileActionSettings: {
showUpload: false, // This also hides the upload icon
showRotate: false // Hides the rotate button
}
});
});
</script>
</body>
</html>
51 changes: 51 additions & 0 deletions file-upload/upload.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<?php

// Define upload directory
$upload_dir = 'uploads/';

// Check if upload directory exists
if (!is_dir($upload_dir)) {
mkdir($upload_dir, 0777, true);
}

// Initialize response array
$response = ['files' => []];

// Loop through uploaded files
foreach ($_FILES['files']['name'] as $key => $name) {
// Get file information
$tmp_name = $_FILES['files']['tmp_name'][$key];
$size = $_FILES['files']['size'][$key];
$type = $_FILES['files']['type'][$key];

// Validate file
if (!empty($name)) {
// Check for valid file type
if (!in_array($type, ['image/jpeg', 'image/png', 'image/gif', 'application/pdf'])) {
$response['files'][] = ['name' => $name, 'error' => 'Invalid file type.'];
continue;
}

// Check for file size
if ($size > 52428800) { // 1 MB limit
$response['files'][] = ['name' => $name, 'error' => 'File size too large.'];
continue;
}

// Generate unique filename
$filename = uniqid() . '_' . $name;

// Upload file
if (move_uploaded_file($tmp_name, $upload_dir . $filename)) {
$response['files'][] = ['name' => $name, 'success' => 'File uploaded successfully.'];
// Store additional information about the uploaded file in a database or other storage
// ...
} else {
$response['files'][] = ['name' => $name, 'error' => 'Error uploading file.'];
}
}
}

// Send JSON response
header('Content-Type: application/json');
echo json_encode($response);
5 changes: 5 additions & 0 deletions php_scripts/oops/Animals.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<?php
abstract class Animals
{
abstract public function get_animal_name();
}
29 changes: 29 additions & 0 deletions php_scripts/oops/Zoo.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<?php
include_once('Animals.php');
class Zoo extends Animals
{
protected $name = 'Circle';
public function get_animal_name_ex()
{
echo "Siddhu";
}


/**
* In PHP, an abstract class is a class that cannot be instantiated directly.
* It serves as a blueprint for other classes and is often used to define
* a set of methods that must be implemented by any child classes.
* Abstract classes are useful when you want to create a common interface for
* a group of related classes while ensuring that certain methods are implemented in those child classes.
*/

// If you are not implement method name that you have in abstact class, it will throw error.
public function get_animal_name()
{
echo "Something";
}
}

$s = new Zoo();

$s->get_animal_name_ex();

0 comments on commit c97c2df

Please sign in to comment.