JOOMLA: How to create a simple image uploader for custom component - php

I'm developing a custom Joomla component for creating, editing and saving data of single records including images. I know that in admin/models/forms/record.xml there must be field name="image" type="file" accept="image/*" but how and where do I need to write the simple php-code for uploading images to specific folder, in which file and how?

if we use field type 'media' in record.xml there is no need to
write upload code.
if we use field type 'file' then we can write upload code in model (models/record.php) . we will put upload code in save function after overriding it.
save function will look like
public function save($data)
{
//file upload code.
return parent::save($data);
}

Related

Symfony3 upload file without using FormBuilder

I have a project with files and when I create new project I have form created with FormBuilder and there I have a field from FileType and it is converted then to UploadedFile and it works fine. What I want is to be able to upload after that files without having to edit the project. A simple "Add more files" button. No other fields required and therefore - no need for FormBuilder. Also I don't want to have "save" button after "Add more files" is clicked. I want to click it choose my files and when I click "Open" the form to be submited. This I have achieved with the following code
<form action="{{ path('image_upload', { 'id': project.id }) }}" method="post" name="form">
<div class="col-md-2" id="imageUpload">
<span>Add More Files</span>
<input type="file" readonly="readonly" id="imageUpload" name="image_upload[]" onchange="form.submit()" multiple/><div class="upload_icon"></div>
</div>
</form>
As you can see this form is only with this one button which onChange submits it. My problem is that after submission the files are not UploadedFile type and the Service I have for uploading images doesnot work. I tried creating an instance of UploadedFile on my own but it requires filePath which I have no idea how to take.
This is what is submitted
From this I don't know how to take filePath to actually add it to the constructor of UploadedFile. Also when I debug what happens during creation of the project (where I use FileType) I see that the filePath is "C:\xampp\tmp" which I have no idea from where it comes. My first thought was to simply add it to the constructor of UploadedFile with this code
$file = new UploadedFile("C:\\xampp\\tmp",$file);
When I run it I receive this error -
The file "C:\xampp\tmp" does not exist
So to recap - this is the path which $file->getPath() gives me when I use FileType, but without it when I have simple upload button, it doesnot exist.
At this point I surrendered and was like "Okay...If it wants me to use FormBuilder so badly - then I will". And here is the code in AddFileType (which is related to no entity or anything)
$builder->
add("addFiles",FileType::class,array(
'label'=>'Add More Files',
'multiple'=> true,
'mapped'=> false,
"required"=>false
));
And here is the other problem - I want to be able to submit the form without submit button. Simply when I click "Add More Files" and select some files the form to be submited for me.
My question - Is there a way to get the filePath when using simple upload button and therefore create an instance of UploadedFile and send it to my database from my Service. If not - is there a way with FormBuilder to make it so when FileType button is clicked to submit the form without any submit button required.
I think you need to set mapped to true, because by setting it to false it won't be a relation between this field and the database's field
$builder->
add("addFiles",FileType::class,array(
'label'=>'Add More Files',
'multiple'=> true,
'mapped'=> true,
"required"=>false
));
public function addArticleAction(Request $request){
//get pic from http request
$Image = $this->getRequest()->files->get('artPic');
//generate a unique name for pic
$picName = $this->generateUniqueFileName().'-'.$Image->getClientOriginalName();
//move pic to a directory
$Image->move(
$this->getParameter('pic_directory'),
$picName
);
//store picName in db
$article = new FlashInfo;
$article->setPhoto($picName);
//other data
$request = $request->request->all();
$article->setTitle($request['arTitle']);
$article->setTitle($request['arText']);
$article->setTitle($request['artSource']);
return new Response(json_encode(array('status'=>'success')));
}

Making file input a not required field - bootstrap file input

I want to make file input field not required , I have 2 fields for file input one is for profile picture and another for uploading documents.
If I do not select any image it says "You did not select file to upload" for both documents and profile picture
If I select a file it works perfectly fine.
The file field should not be mandatory.
I am using this plugin : http://plugins.krajee.com/file-input/demo for front end design
Following is the code I tried on form submit
if(!array_filter($_FILES['docs']['name'])) {
//upload file
}
if($_FILES['profile_pic']['name']!='') {
//upload file
}
What is wrong in the above code. Can anyone please tell why it is not working...

PHP image upload and crop with url

I am using the below upload class for image upload and manipulating.
class.upload.php samples, a files uploading and images manipulation PHP class
Now I want to change form input type="file" to a text field where I will give a Image URL.
How can I make this uploading class to work.
Thanks In Advance.
this class seems to accept url's as arguments as well so just change the input type to text, name to for example image_url and use this line to manipulate the image as you wish after submitting the form:
$handle = new upload($_POST['image_url']);
Get the file name through text box and in background use php curl function to upload the file in the server and your uploading class will work fine
PHP Curl to upload file

Preview and posting images from front-end with WordPress security concerns

I've a front-end form with a file input where anybody (no registered users) can upload an image that will be attached to a custom meta field in the back-end. To preview the image I'm using the old iframe technique. My form looks like this:
<form id="upload-photo" method="post" target="preview-iframe" action="<?= get_template_directory_uri() ?>/inc/upload.php" enctype="multipart/form-data" >
<div id="preview"><img src="" alt="" /></div>
<iframe id="preview-iframe" name="preview-iframe" src=""></iframe>
<input type="file" name="author_photo" />
<input type="hidden" id="attachment" name="attachment" value=""/>
<button type="submit" id="upload">Upload</button>
</form>
Then I use WordPress built-in functions to handle the upload and move the file into the media gallery. I use the hidden field to store the WordPress id of the attachment so if users decide to change the picture by uploading a new one then the old one would get removed. This is my PHP:
<?php
define('WP_USE_THEMES', false);
require_once '../../../../wp-load.php';
require_once(ABSPATH .'wp-admin/includes/image.php');
require_once(ABSPATH .'wp-admin/includes/file.php');
require_once(ABSPATH .'wp-admin/includes/media.php');
if (isset($_POST['attachment'])) {
wp_delete_attachment($_POST['attachment'], true);
}
foreach ($_FILES as $file => $data) {
if ($data['error'] === UPLOAD_ERR_OK) {
$attachment = media_handle_upload($file, null);
}
}
echo wp_get_attachment_image($attachment, 'author', 0, array('id' => $attachment));
?>
And finally the jQuery that glues it all together:
var $preview = $('#preview'),
$iframe = $('#preview-iframe'),
$attachment = $('#attachment');
$('#upload').click(function() {
$iframe.load(function() {
var img = $iframe.contents().find('img')[0];
$preview.find('img').attr('src', img.src);
$attachment.val(img.id);
});
});
Everything works perfect but there are few issues with this simple approach:
If JavaScript is disabled images don't get removed
If the user uploads a file then refreshes the site and then uploads and other image, then the previous one wouldn't get deleted because the previous attachment ID doesn't exist due to the refresh.
A malicious user could edit the hidden attachment field with a different ID.
I though about uploading the files to a /temp folder for previewing purposes only and then run a cron job every X time to empty it out. But how do I then make use of WordPress functions to move the image from /temp to the gallery once the whole form has been submitted so I can get and attachment id to link to the post?
Notice that I've two forms, one for handling the image, and the global form with all the content that will be posted and that already works since I can post the new post as "draft" and admins have the power to decide. But how to do this for images securely? How to preview an image and put it in the gallery only if the form has been posted successfully?
I know about the FileReader API but I need compatibility for IE8+ so that won't do. I'm also aware of all the Flash and Silverlight solutions but that's not an option either. Also please don't just link to WordPress plugins, I'm trying to learn here.
Ok, it seems I'm answering my own questions again. This is how I solved it. I found a WordPress function media_handle_sideload that lets you upload files from other locations and not only files from the $_FILES array like the previous function.
So I went with my initial approach now that I know about that function. I basically upload the file to a /temp folder for preview purposes and give it a unique id that I store into the hidden field. When the user submits the overall form and passes validation I take the ID that was stored and find out if the file exists and if so I move it to the gallery. This solves most of my concerns about security because even if a malicious user finds an existing unique ID (unlikely but possible) the file wouldn't get removed like before, but just moved into the gallery (not a big deal).
Finally I set-up a cron job to empty out the temp folder every X amount of time.

how to upload file php through jquery and smarty

i need to upload a file doc or pdf or rich text through jquery and smarty
i try to pass the file in jquery is given below
window.location.href= sitePath+'download?p='+$('#file').val();
but the p doesn't have value. how to get the file path or name and how can stored in server
in controller i write just pass the query to model is given below
$model=new download();
$id=$model->upload($param);
and i can't develop the model code....
please help me
You can't send files like that.
You should either submit a form with enctype="multipart/form-data" or use some AJAX uploader (which uses form submit to iframe and then stores a file using PHP script).
EDIT: Some references
http://www.w3schools.com/php/php_file_upload.asp - tutorial on how to upload a file using PHP
http://valums.com/ajax-upload/ - example of ajax uploader.
EDIT2: The problem is not with your model code but with the way you try to submit a file.

Categories