Javascript | Веб-Розробка

Filestack API: create file when base64

Листопад 21, 2018 by admin

<!DOCTYPE html>
<html>
<head>

<script src="https://unpkg.com/b64-to-blob"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script>
var contentType = 'image/png';
var b64Data = '/9j/4AAQSkZJ...8JFcOysWJCghSC2sTSwlCcVixMkNSxYsQH//Z';

var blob = b64toBlob(b64Data, contentType);
var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function (event) {
    arrayBuffer = event.target.result;
    var buf = new Uint8Array(arrayBuffer)

    $.ajax({
        url: "https://www.filestackapi.com/api/store/S3?key=YOUR_KEY",
        method: "POST",
        data: buf,
processData: false,
contentType: 'application/octet-stream',
        success: function (data) {
            console.log(data);
        }
    });
};
fileReader.readAsArrayBuffer(blob);
// var blobUrl = URL.createObjectURL(blob);
// window.location = blobUrl;

</script>
<title></title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

var contentType = 'image/png';

var b64Data = '/9j/4AAQSkZJ...8JFcOysWJCghSC2sTSwlCcVixMkNSxYsQH//Z';

var blob = b64toBlob(b64Data, contentType);

var arrayBuffer;

var fileReader = new FileReader();

fileReader.onload = function (event) {

arrayBuffer = event.target.result;

var buf = new Uint8Array(arrayBuffer)

$.ajax({

url: "https://www.filestackapi.com/api/store/S3?key=YOUR_KEY",

method: "POST",

data: buf,

processData: false,

contentType: 'application/octet-stream',

success: function (data) {

console.log(data);

}

});

};

fileReader.readAsArrayBuffer(blob);

// var blobUrl = URL.createObjectURL(blob);

// window.location = blobUrl;

</script>

</head>

<body>

</body>

</html>

Інсталяція Chrome Extension із iframe

Червень 25, 2018 by admin

Інсталяція Chrome Extension із iframe заборонена, при спробі отримаємо помилку

Uncaught Chrome Web Store installations can only be started by the top frame.

Варіант вирішення проблеми:

На основній сторінці добавляємо наступний js

<script>
  window.installChromeExtension = function () {
    chrome.webstore.install(
      'https://chrome.google.com/webstore/detail/...',
    );
  }
</script>

window.installChromeExtension = function () {

chrome.webstore.install(

'https://chrome.google.com/webstore/detail/...',

);

}

</script>

Далу у самому фреймі виконуємо перевірку, якщо це фрейм то викликаємо функцію батьківського вікна, інакше зразу виконуємо інсталяцію

if (window.self !== window.top) {
  window.top.installChromeExtension();
} else {
  chrome.webstore.install('https://chrome.google.com/webstore/detail/...');
}

if (window.self !== window.top) {

window.top.installChromeExtension();

} else {

chrome.webstore.install('https://chrome.google.com/webstore/detail/...');

}

Devise ajax sign up

Червень 13, 2018 by admin

$('#submit-btn').on('click', function () {
  if ($('#new_user')[0].checkValidity()) {
    $('#new_user').submit();
    $('.status-error').remove();
    $('.add-error').removeClass('has-error');
  }
});

$('#submit-btn').on('click', function () {

if ($('#new_user')[0].checkValidity()) {

$('#new_user').submit();

$('.status-error').remove();

$('.add-error').removeClass('has-error');

}

});

$('form#new_user').bind('ajax:success', () => {
    animationSignUpForm();
    setTimeout(() => window.location.replace('/'), 2000);
  });

$('form#new_user').bind('ajax:error', (evt, xhr) => {
  $('form#new_user').prepend(
    '<div class="alert alert-danger status-error">Please review the problems below:</div>',
  );
  $('.form-group.email.user_email');

  var errors = xhr.responseJSON.errors;

  for (key in errors) {
    var array = errors[key];
    var element = `.form-group.${key}.user_${key}`;

    $(element).addClass('add-error has-error');

    array.forEach(function(item){
      $(element).append(`<span class="help-block status-error">${item}</span>`);
    });
  }
});

$('form#new_user').bind('ajax:success', () => {

animationSignUpForm();

setTimeout(() => window.location.replace('/'), 2000);

});

$('form#new_user').bind('ajax:error', (evt, xhr) => {

$('form#new_user').prepend(

'<div class="alert alert-danger status-error">Please review the problems below:</div>',

);

$('.form-group.email.user_email');

var errors = xhr.responseJSON.errors;

for (key in errors) {

var array = errors[key];

var element = `.form-group.${key}.user_${key}`;

$(element).addClass('add-error has-error');

array.forEach(function(item){

$(element).append(`<span class="help-block status-error">${item}</span>`);

});

}

});

app/controllers/users/registrations_controller.rb

class Users::RegistrationsController < Devise::RegistrationsController
  respond_to :html, :json

1 2	class Users::RegistrationsController < Devise::RegistrationsController respond_to :html, :json

app/views/users/registrations/_sign_up.html.erb

<%= simple_form_for(resource, as: resource_name, 
    url: registration_path(resource_name), 
    remote: true, data: { type: :json }) do |f| %>

<%= simple_form_for(resource, as: resource_name,

url: registration_path(resource_name),

remote: true, data: { type: :json }) do |f| %>

An alternative solution to a problem when Safari does not support the download attribute

Березень 21, 2018 by admin

 toDataURL = (url, callback) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      const reader = new FileReader();
      reader.onloadend = function () {
        callback(reader.result.replace(/^data:image\/\w+;base64,/, ''));
      }
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
  }

  downloadImage = (file) => {
    const { name, url, file_type } = file;
    const fileType = file_type.split('/')[1];
    const link = document.createElement('a');
    link.style = 'position: fixed; left -10000px;';
    link.download = /\.\w+/.test(name) ? name : `${name}.${fileType}`;
    this.toDataURL(url, function (dataUrl) {
      link.href = `data:application/octet-stream;base64,${dataUrl}`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  };

  handleDownloadButton = (file) => {
    const imageTypes = ['bmp', 'ico', 'mp3', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'svg'];
    const { name, file_type, url } = file;
    const fileType = file_type.split('/')[1];
    const isSafari = navigator.userAgent.indexOf('Safari') !== -1;

    if (isSafari && (imageTypes.includes(fileType))) {
      this.downloadImage(file);
    } else {
      const link = document.createElement('a');
      link.download = name;
      link.href = url;
      link.click();
    }
  };

toDataURL = (url, callback) => {

const xhr = new XMLHttpRequest();

xhr.onload = function () {

const reader = new FileReader();

reader.onloadend = function () {

callback(reader.result.replace(/^data:image\/\w+;base64,/, ''));

}

reader.readAsDataURL(xhr.response);

};

xhr.open('GET', url);

xhr.responseType = 'blob';

xhr.send();

}

downloadImage = (file) => {

const { name, url, file_type } = file;

const fileType = file_type.split('/')[1];

const link = document.createElement('a');

link.style = 'position: fixed; left -10000px;';

link.download = /\.\w+/.test(name) ? name : `${name}.${fileType}`;

this.toDataURL(url, function (dataUrl) {

link.href = `data:application/octet-stream;base64,${dataUrl}`;

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

});

};

handleDownloadButton = (file) => {

const imageTypes = ['bmp', 'ico', 'mp3', 'pdf', 'png', 'jpg', 'jpeg', 'gif', 'svg'];

const { name, file_type, url } = file;

const fileType = file_type.split('/')[1];

const isSafari = navigator.userAgent.indexOf('Safari') !== -1;

if (isSafari && (imageTypes.includes(fileType))) {

this.downloadImage(file);

} else {

const link = document.createElement('a');

link.download = name;

link.href = url;

link.click();

}

};

const file = ...
...
<span
  className={'react-grid-Cell-download'}
  style={editIcon}
  key={`downloadFile${id}`}
  onClick={() => this.handleDownloadButton(file)}
>

const file = ...

...

<span

className={'react-grid-Cell-download'}

style={editIcon}

key={`downloadFile${id}`}

onClick={() => this.handleDownloadButton(file)}

Ajax

Січень 15, 2018 by admin

JavaScript:

function check_conference_import_spreadsheet_status(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);

    xhr.onreadystatechange = function () {
        if (this.readyState != 4) return;

        if (this.status == 200) {
            var response = JSON.parse(this.responseText);
            if (response.status != 'in_processing') {
                location.reload();
            }
            return;
        }
    }
    xhr.send();
}

function check_conference_import_spreadsheet_status(url) {

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.onreadystatechange = function () {

if (this.readyState != 4) return;

if (this.status == 200) {

var response = JSON.parse(this.responseText);

if (response.status != 'in_processing') {

location.reload();

}

return;

}

xhr.send();

}

Jquery

Добавляємо class до картинки, яку вставляємо в CKEditor’і

Вересень 29, 2017 by admin

ckeditor/config.js

CKEDITOR.on( 'dialogDefinition', function( ev )
{
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;

  if ( dialogName == 'image' )
  {
    var advTab = dialogDefinition.getContents( 'advanced' );
    var urlField = advTab.get( 'txtGenClass' );
    urlField['default'] = 'new_class_for_image';
  }
});

CKEDITOR.on( 'dialogDefinition', function( ev )

{

var dialogName = ev.data.name;

var dialogDefinition = ev.data.definition;

if ( dialogName == 'image' )

{

var advTab = dialogDefinition.getContents( 'advanced' );

var urlField = advTab.get( 'txtGenClass' );

urlField['default'] = 'new_class_for_image';

}

});

SergeLand Image Zoomer

Вересень 9, 2017 by admin

SergeLand Image Zoomer – безкоштовний jQuery плагін емуляції зображення екранної лупи

Send form when press enter

Серпень 9, 2017 by admin

Example

$(document).ready(function() {
  $('.submit_on_enter').keydown(function(event) {
    if (event.keyCode == 13) {
      $('#form_id').submit();
      return false;
    }
  });

});

$(document).ready(function() {

$('.submit_on_enter').keydown(function(event) {

if (event.keyCode == 13) {

$('#form_id').submit();

return false;

}

});

jQuery Validation Plugin on Rails

Серпень 4, 2017 by admin

Приклад використання валідації на стороні клієнта за допомогою плагіна jQuery Validation в Rails

Gemfile

gem 'jquery-validation-rails'

1 2	gem 'jquery-validation-rails'

app/assets/javascripts/application.js

//= require jquery.validate

1 2	//= require jquery.validate

$("#form_call").validate({
    debug: true,
    rules: {
      "contact[name]": {required: true},
      "contact[phone]": {required: true},
      "contact[message]": {required: true}
    },
    messages: {
      "contact[name]": "Введіть ваше ім'я",
      "contact[phone]": "Введіть номер телефону",
      "contact[message]": "Введіть текст повідомлення",
    }
  });

$("#form_call").validate({

debug: true,

rules: {

"contact[name]": {required: true},

"contact[phone]": {required: true},

"contact[message]": {required: true}

messages: {

"contact[name]": "Введіть ваше ім'я",

"contact[phone]": "Введіть номер телефону",

"contact[message]": "Введіть текст повідомлення",

}

});

Веб-Розробка

WebDevelop

Category Archives: Javascript