First cut at a simple image upload facility
Development and Programming
Comes in two parts. A plugin to add bits of code to the SAEF and an extension to upload images and modify the form tag.
This is very rough and ready and will probably need some work but it is working for me after a lot of blood, sweat and swearing.
The plugin usage section shows the two bits that need adding to the SAEF and the extension requires settings in order to work. Currently you can only use this on one field in one template. It allows upload of multiple images and currently concatonates them into one field as an image tag.
Please feel free to hack and improve.
This is great.
Can you elaborate on the instructions a bit? The field is the custom weblog field number, and the savefield is the name of that field?
I can get images to upload, but a link does not show up in a field. How should this plugin be functioning? Is this going to be an img tag or just the url (I’d personally like the URL)?
I have this near the top of my template to load the [removed]
{exp:image_upload:script_header field="file2upload" savefield="images"}and this where I want the input field
<input type="hidden" name="image_max_width" id="image_max_width" value="160">
<input type="hidden" name="image_max_height" id="image_max_height" value="200">
<input type="hidden" name="image_max_filesize" id="image_max_width" value="60000">
{exp:image_up_form:image_input field="file2upload" savefield="images"}The image is held as a url (or series of urls) it the field, so my template to display the image has
<tr><td colspan="2">{pic1}</td></tr>Does this help?
Did you mean to have two input fields with the id image_max_width there?
No! - should be filesize.
Sorry, not a whole lot of help… Let me be more specific. What “field” and “savefield” refer to?
In the example you gave, the pic1 will be replaced with just the URL correct?
field is the name of the input field on the form and savefield is what is used to display list of uploaded images. It doesn’t matter what values you use, they do no relate to anything in the weblog.
So how do I get the URL from the uploaded file into a custom weblog field?
You don’t need to do anything. You told it what field you wanted the url in when you did the settings for the extension so the extension puts the url in the that field.
Hi there,
Sorry to bring this up again but just came across this and gave it a try but cannot get it to work in my system. Was wondering if anyone could let me know where I am going wrong?
I have this code (please don’t laugh at the totally incorrect doc declaration and terrible html, these were just put in so that the page would be a standard html page no matter how badly coded!! 😊 )
<html>
<head>
{exp:image_up_form:script_header field="file2upload" savefield="images"}
</head>
<body>
{exp:weblog:entry_form weblog="default_site" return="site/saef" preview="site/entry"}
{preview}
<h1>{title}</h1>
{display_custom_fields}
{/preview}
<table>
<tr>
<td>
<input type="hidden" name="image_max_width" id="image_max_width" value="160">
<input type="hidden" name="image_max_height" id="image_max_height" value="200">
<input type="hidden" name="image_max_filesize" id="image_max_width" value="60000">
{exp:image_up_form:image_input field="file2upload" savefield="images"}
Title
<input type="text" name="title" id="title" value="{title}" size="50" maxlength="100" onkeyup="liveUrlTitle();" />
URL Title
<input type="text" name="url_title" id='url_title' value="{url_title}" maxlength="75" size="50" />
{formatting_buttons}
{custom_fields}
{if required}* {/if}{field_label}
{field_instructions}
{if textarea}
<textarea id="{field_name}" name="{field_name}" dir="{text_direction}" cols="50" rows="{rows}" onclick="setFieldName(this.name)">{field_data}</textarea>
{/if}
{if textinput}
<input type="text" dir="{text_direction}" id="{field_name}" name="{field_name}" value="{field_data}" maxlength="{maxlength}" size="50" onclick="setFieldName(this.name)" />
{/if}
{if pulldown}
<select id="{field_name}" name="{field_name}">
{options}<option value="{option_value}"{selected}>{option_name}</option>{/options}
</select>
{/if}
{if date}
<input type="text" id="{field_name}" name="{field_name}" value="{field_data}" maxlength="{maxlength}" size="50" onclick="setFieldName(this.name)" />
{/if}
{if relationship}
<select id="{field_name}" name="{field_name}">
{options}<option value="{option_value}"{selected}>{option_name}</option>{/options}
</select>
{/if}
{/custom_fields}
Trackback URLs
<textarea name="trackback_urls" cols="50" rows="5">{trackback_urls}</textarea>
</td>
<td valign="top">
<input type="submit" name="submit" value="Submit" />
<input type="submit" name="preview" value="Preview" />
{status_menu}
Status
<select name="status">
{select_options}
</select>
{/status_menu}
Date
<input type="text" name="entry_date" value="{entry_date}" maxlength="23" size="25" />
Expiration Date
<input type="text" name="expiration_date" value="{expiration_date}" maxlength="23" size="25" />
Comment Expiration Date
<input type="text" name="comment_expiration_date" value="{comment_expiration_date}" maxlength="23" size="25" />
<input type="checkbox" name="sticky" value="y" {sticky} /> Make Entry Sticky
<input type="checkbox" name="allow_comments" value="y" {allow_comments} /> Allow Comments
<input type="checkbox" name="allow_trackbacks" value="y" {allow_trackbacks} /> Allow Trackbacks
<input type='checkbox' name='dst_enabled' value='y' {dst_enabled} />DST Active on Date of Entry
{ping_servers}
Ping Servers
{ping_row}
<input type="checkbox" name="ping[]" value="{ping_value}" {ping_checked} /> {ping_server_name}
{/ping_row}
{/ping_servers}
{category_menu}
Categories
<select name="category[]" size="4" multiple="multiple">
{select_options}
</select>
{/category_menu}
</td>
</tr>
</table>
{/exp:weblog:entry_form}
</body>
</html>I have a custom field for the weblog called image-upload and I have selected both this stand-alone entry form and the image-upload field in the extensions settings and then clicked update. It is also set to the correct upload destination.
Trying the code out above submits the entry as per normal but no image ever makes it to the uploads folder and no code is placed into the custom field when I check in the EE admin panel.
Am I doing something silly? Do I need to change either the field=”file2upload” or savefield=”images” pieces of code to reflect my custom field. Pretty sure that I shouldn’t have to but up to this point nothing I have tried has worked so am open to suggestions! 😊
Thanks in advance for any help with this.
Best wishes,
Mark
Did you get this working?
Hi Phoebe,
Thanks for the answer. No I unfortunately never could get it to work I’m afraid. Any ideas from the code above what I am doing wrong?
Any help with this would be greatly appreciated.
Best wishes,
Mark
I’ve been playing with this for the last few hours and I must say thanks Phoebe. You are so saving me time and stress :) Other than that I have two things to mention. The first is a possible solution to Marks issue, the second is a question regarding something in the code.
Firstly, the issue Mark has been having. I had the same problem and resolved it by changing line 143 in the extensions code. I changed it from…
if (isset($options['hidden_fields']['URI']) && $options['hidden_fields']['URI']==$this->settings['template'])to
if (isset($options['hidden_fields']['URI']) && strncmp($options['hidden_fields']['URI'], $this->settings['template'], strlen($this->settings['template'])) == 0)The problem I had was that the page I was on wasn’t the exact one that I had specified in the settings. I’m passing a number of parameters into the template on the url.
Secondly, does the code only deal with jpeg files (specifically images ending in .jpg)? I was having a problem uploading an image with .jpeg extension and found that if I changed the extension to .jpg it started working. Then when testing with a png it seemed to silently ignore the file. Looking at the code seems to indicate that it’s checking for a .jpg extension?
Steve
Hi Steve / Phoebe,
Unfortunately still no luck here. I tried the change that you mentioned but still no image gets uploaded. Would love to get this working though as another file upload possibility so if anyone else has any ideas I would be grateful.
Best wishes,
Mark
I can get Mark Huot’s File extension working well with SAEF but I need a system that can upload a photo to a temporary place for previewing the entire entry. Oh and also something that retains the contents of the file input field.