Image send to email but not attachament, image inputed image from site - image

I have a contact form and I have some images for every field. When I send email I want to have to email the image of every field, but this show me just link. Here is the code for image:
<td rowspan="8" width="44%" style="padding-right: 270px;"><img src="../images/ferestre-fixe/thumb_150_120_03-2.jpg" style="border: 0px none; float: right;" title=""/>
<input type="hidden" name="a3cmgif" id="a3cmgif" value="http://<?php echo $_SERVER['SERVER_NAME'];?>/images/ferestre-fixe/thumb_150_120_03-2.jpg" readonly/>
</td>
OK, we have <input type="hidden" name="a3cmgif" id="a3cmgif" value="http://<?php echo $_SERVER['SERVER_NAME'];?>/images/ferestre-fixe/thumb_150_120_03-2.jpg" readonly/>, but I got to mail http://www.example.com/images/ferestre-fixe/thumb_150_120_03-2.jpg
I want to receive to mail directly image. I tried with img src but this send me to mail the code comment.

Related

Display Textbox value in paragraph tag

I'm sending mail. I'm getting value from textbox, while i send mail i can't get it as paragraph.
For Example:
Textbox value = Hi
I'm Laravel
But in mail inbox = Hi I'm Laravel
Getting Value in Blade:
<textarea style="width: 100%;" name="message" cols="40" rows="10" required></textarea>
In Mail Blade (which display in email inbox):
<p>{{ $message }}</p>
You need to use any text editors like https://www.tiny.cloud/ insted of textarea.
or you need to send the data with html tags

How to Show an element onclick onclick only if the user is logged in if not redirects to login using Laravel

I want to be able to show an element (phone number) which is initially hidden. I have a button called show phone which on click will display the element containing the phone number which was hidden. It is working quite alright but I want to add a new rule for it to show the phone number. I want it to show the phone number only if the user is logged in to his account if it will redirect to the login page with a flash message saying "In order to view this phone number you must be logged in". I tried to put an auth::check to the div and got stuck at this point.
Can anyone please tell me how can I achieve that using Laravel.
Here is my view
<span class="job-is ft" id="more" onclick="$('.details').slideToggle(function(){$('#more').html($('.details').is(':visible')?'Hide Phone':'Show Phone');});">Voir le numero</span>
#if (Auth::check())
<div class="extra-job-info details" style="display:none">
<p style="text-align: center; padding: 10px; font-size: 45px;"><i class="la la-phone"></i> {{ $profiledetail->phone }}</p>
</div>
#else
<p> In order to view this number you must login
#endif
Do anyone know an easy way to achieve this?
Any help will be appreciated.
Something like this
<span class="job-is ft" id="more" onclick="$('.details').slideToggle(function(){$('#more').html($('.details').is(':visible')?'Hide Phone':'Show Phone');});">Voir le numero</span>
<div class="extra-job-info details" style="display:none">
#if (Auth::check())
<p style="text-align: center; padding: 10px; font-size: 45px;"><i class="la la-phone"></i> {{ $profiledetail->phone }}</p>
#else
<p>Please login to see details</p>
#endif
</div>

Jasny bootstrap fileupload image preview error

I'm using Jasny Bootstrap Fileupload and is working for the first submit. The problem: after a first submit working ok, the image preview doesn't work anymore.
Steps to reproduce:
1. Select a photo. The photo is showed (img src="data:image/jpeg;base64... is created inside #fileupload-preview)
2. Submit the form. The photo is uploaded ok
3. Reset the form. No photo is showed.
4. Select a photo. The photo is not showed <= ERROR (nothing inside #fileupload-preview)
5. Submit the form. The photo is uploaded ok
To simulate it with JSFiddle you can:
1. Choose a photo
2. Click 'save'
3. Choose another photo. Error....
JSFiddle example
Relevant jasny fileupload code:
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file">
<span class="fileupload-new">Choose a photo</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="foto" id="foto" />
</span>
Delete
</div>
</div>
Thanks
The problem isn't in the reset. Instead the $.ajaxFileUpload breaks the widget. You can submit a bug for both the Jasny Bootstrap and ajaxFileUpload library.
However perhaps it's easier to resort to another library to upload the form like http://jquery.malsup.com/form/

Image sprite - form submit button

Can i use image sprites for my form submit button, tried a few things but nothing seems to work.
.button, .download, .OK, .file{
background: url(app/sprites.png) no-repeat;
}
.button{
background-position: -1px -212px ;
width: 170px;
height: 30px;
}
My form
<form action="add.php" method="post" value="Username">
<div style="float:left; margin-left:15px;"><input type="text" name="fbid" required></div>
<div style="float:left; margin-left:2px;"><input type="submit" value="Submit"></form>
Right now you are missing a class on the input.
<input type="submit" class="button" value="Submit">
With that it'll work.
I put it into a jsFiddle, using a different image because I don't have access to yours. You can play with the position, in incriments of 32px.
jsfiddle.net/CzWCv
Have you tried
<div class="button" style="float:left; margin-left:2px;"><input type="submit"
value="Submit"></form>
??

jquery ajax form submit plugin not posting file input

I've got this form:
<form id="imageinputpopup" class=suggestionsubmit style="display: none">
<span>Add a thing!</span><br/>
<label>url: </label><input name="imageurl" type="url"><br/>
<label>file: </label><input name="imagefile" type="file"><br/>
<input type='hidden' name='schoolid' class="schoolid">
<input type="submit" value="Submit">
</form>
And this document.ready:
<script type="text/javascript">
$(document).ready(function() {
$('.schoolid').val(get_gmap_value('school_id'));
$(".allow-submission").live('click', function(){
if($(this).attr('inputtype')=="colorpicker"){
.....
} else if($(this).attr('inputtype')=="image"){
remove_hidden("#imageinputpopup");
add_fieldname($(this), $("#imageinputpopup"));
$("#imageinputpopup").dialog();
} else if($(this).attr('inputtype')=="text"){
....
} else {
//nothing
}
});
$(".suggestionsubmit").submit(function(){
event.preventDefault();
alert($(this).html());
$(this).ajaxSubmit({
url: '/save-school-suggestion/',
type: 'post',
success: function(response){
response = jQuery.parseJSON(response);
// Check for login redirect.
// if ( response.requireLogin ) {
// alert('Sign up or log in to save your answer');
// } else {
$('.suggestionsubmit').dialog('close');
// }
}
});
});
});
function add_fieldname(element, addto){
var elementname = document.createElement('input');
elementname.type = 'hidden';
elementname.name = 'fieldname';
elementname.value = element.attr('fieldname').replace(' ', '_');
$(elementname).addClass('fieldname');
addto.append(elementname);
}
function remove_hidden(element){
$(element+' .fieldname').remove();
}
But the file field isn't showing up server side.
Why?
I found this in the documentation:
Why aren't all my input values posted?
jQuery form serialization aheres closely to the HTML spec. Only successful controls are valid for submission.
But I don't understand why my file control would be invalid.
I have another submission form in a different place on my site that is almost identical and works perfectly...
EDIT: this is the other form that does work (it has some extra stuff in it, but the form tag just has an id, like the problem one, and the input tags are the same).
<form id="photos-submission-form6">
<input type="hidden" name="section" value="photos">
<input type="hidden" name="school" id="photos-submit-school6">
<div style="margin-bottom: .5em">
<p style="position: relative; width:80%; font-size: 14px; display: inline" id="photos-anonymity-header6">Post as: null</p>
<img id="helpicon6" src="/static/img/help-icon.png" style="float: right; cursor: pointer; padding-left:1em;">
<div id="explanation6" style="display: none; padding:1em; background-color:white; border:2px solid gray; position: absolute;z-index:30; right:5px; top:5px">For more posting options, <a id="profilelink6" href="/profile/">fill out your profile</a></div>
</div>
<div id="photos-anonymity-select6" style="margin-bottom: .75em; width:412px" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%; "></a></div>
<input type="hidden" id="photos-anonymity-level6" name="anonymity-level" value="username">
<span style="line-height: 40px;">
<label class="photouploadlabel">URL</label><input type="text" name="image-url" style="width: 335px"><br>
<label class="photouploadlabel">File</label><input type="file" name="image-file" style="width: 335px"><br>
<label class="photouploadlabel">Caption</label><input type="text" id="image-caption6" name="image-caption" style="width: 335px; color: rgb(128, 128, 128); ">
</span>
<div style="height: 30px; margin-top: 1em; width: 413px;">
<label id="photos-tagsbutton6" style="margin-right: .5em; cursor: pointer; vertical-align: bottom; float:left; line-height: 1.8em;">Tags</label>
<input id="photos-tagsinput6" style="display: none;" type="text" name="tags">
<button id="send-photos-suggestion6" disabled="" style="float:right; position: relative; bottom: 7px; right: -4px;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only" role="button" aria-disabled="true"><span class="ui-button-text">Post</span></button>
</div>
</form>
This is probably not the case but are sure there are no spelling mistake server side? like you would be using $_FILE instead of $_FILES? Could you post the relevant php also?
Also, definitely not an issue but it is recommended to close your input tags, now like this:
<input ... />
Add enctype="multipart/form-data" attribute to your form.
Try to change the type of the input imageurl from url to text:
FROM:
<label>url: </label><input name="imageurl" type="url"><br/>
TO:
<label>url: </label><input name="imageurl" type="text"><br/>
I am not sure, but maybe the jquery plugin fails serializing the form due to invalid type attribute of image_url.
Hey you just forgot to add ---> enctype="multipart/form-data" in the form tag. This will help you out.
I think you have a problem with the binding in javascript not recognising your file.
Try binding your submit trigger event with another live() function
i.e. change
$(".suggestionsubmit").submit(mooFar(e));
to
$(".suggestionsubmit").live('submit', mooFar(e));
...........I was looking in the wrong place in the request for the file.
Server side should have been:
if not s.url_field and 'imagefile' in request.FILES:
s.image_field = request.FILES['imagefile']
instead of
s.image_field = request.POST.get('imagefile', None)
Complete and utter fail on my part.
Make sure the files you're testing aren't outside the max file size, it would be worth setting this in your HTML.
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
Also, testing without the display:none might be worth while until you have the form working; which browser are you testing in?

Resources